[Vue] computed와 watch

쿼카쿼카·2022년 10월 30일

computed vue watch

Vue / Nuxt

목록 보기

10/35

computed

연산 결과를 캐싱하여 re-render 될 때마다 불필요한 연산 줄임

templete 연산

<template>
  <div>
    {{message}}
    <h2>거꾸로 message</h2>
    <!-- template에서 연산 -->
    {{message.split('').reverse().join('')}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  }
}
</script>

위처럼 작성하면 state나 props 변경으로 렌더링 일어날 때마다 연산이 발생

computed 연산

<template>
  <div>
    {{message}}
    <h2>거꾸로 message</h2>
    {{reverseMessage}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  // computed 연산
  computed: {
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

message가 바뀌지 않으면 캐싱된 연산을 렌더링 때 사용

methods 연산

<template>
  <div>
    {{message}}
    <h2>거꾸로 message</h2>
    {{reverseMessage}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  // methods 연산
  methods: {
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

methods에서 연산을 하면 결과는 같으나 함수는 렌더링 때마다 실행되어 캐싱 이득을 취할 수 없음

watch

state나 props를 감시하여 값 변경될 때의 행동 지정

watch로 fullname 만들기

<template>
  <div>
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">

    <h2>full name</h2>
    <span>{{fullname}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstname: '',
      lastname: '',
      fullname: ''
    }
  },
  watch: {
    // 매개변수는 watch가 감시하는 data의 변경된 값
    firstname(val) {
      this.fullname = `${val} ${this.lastname}`
    },
    lastname(val) {
      this.fullname = `${this.firstname} ${val}`
    }
  }
}
</script>

watch 프로퍼티로 변화 감시를 원하는 state나 props 값 넣어 함수 생성
매개변수는 변경된 값을 가리킴
first last 변화 감지하여 fullname 생성
사실 위 방법보단 computed가 더 좋음

computed로 fullname 만들기

<template>
  <div>
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">

    <h2>full name</h2>
    <span>{{fullname}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // state에 fullname 제거
      firstname: '',
      lastname: ''
    }
  },
  computed: {
    // computed로 fullname 한 번에 관리
    fullname() {
      return `${this.firstname} ${this.lastname}`
    }
  }
}
</script>