computed

참조된 값이 변경될 때마다 정의된 계산식을 수행하고 그 결과값을 출력한다.

computed와 methods의 캐싱

함수를 실행한다는 것에 있어서 computed와 methods는 통하는 것이 있다. 이 둘의 차이점은, computed의 경우 종속되어 있는 대상이 변화해야지만 함수가 실행된다는 것이다. methods의 함수의 경우에는 호출되기만 하면 바로 실행되지만, computed는 호출된다고 해도 종속 대상이 변경되지 않는 한 변화하지 않는다. 따라서 계산의 부하가 굉장히 커지는 경우, methods보다는 캐싱이 가능한 computed를 사용하는 것이 도움이 될 수 있다.

<template>
  <div>{{getFullName()}}</div>
  <div>{{getFullName()}}</div>
  <div>{{getFullName()}}</div>
  <div>{{getFullName()}}</div>
  <div>{{getFullName()}}</div>
	**<!-- 계산의 반복 -->**
</template>

<script>
export default {
  name: 'BasicView',
  components: {},
  data() {
    return {
      firstName: 'David',
      lastName: 'Kim'
    }
  },
  methods: {
    **getFullName**() {
      return `${this.firstName} ${this.lastName}`
    },
  },
}
</script>

위와 같이 계속해서 method를 통해 같은 계산을 반복하는 경우, 생각보다 시스템 자원을 잡아먹는다. 이 경우 computed를 사용해서 미리 fullName을 캐싱한 다음 이 캐싱 값을 이용할 수 있다.

<template>
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  name: 'BasicView',
  components: {},
  data() {
    return {
      firstName: 'David',
      lastName: 'Kim',
    }
  },
  **computed**: {
    **fullName**() {
      return `${this.firstName} ${this.lastName}`  **// 결과값 캐싱**
    },
  },
}
</script>

또 다른 기능 : 참조값 변경 감지 및 수정

<template>
  <input type="text" v-model="**lastName**" />
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
  <div>{{ fullName }}</div>
</template>
...
computed: {
    fullName() {
      return `${this.firstName} ${**this.lastName**}`
    },
  },

위와 같이 computed가 감시하고 있는 데이터가 변경된다면 자동으로 그 변경 사항을 감지하고 업데이트한다.

computed의 getter와 setter

watch

지정한 대상의 값이 변경될 때마다 정의되어 있는 함수를 실행한다.