[Vue.js] Computed VS Watch vs Method 정리

computed와 watch… watch는 비동기적인 코드를 처리할때 쓴다고 정도만 알고 있었더니 너무 헷갈린다. computed로 안되지만 watch로는 동작하는 코드가 있다.. 한번 정리해보자.

<div id="example">
  {{x}} {{y}} {{z}}
</div>

var vm = new Vue({
  el: '#example',
  data: {
    y: 'y'
  },
  
  created: function() {
    // 3초후에 y값을 바꾼다.
	setTimeout(()=> this.y='kill bill', 3000);
  },

  computed: {
    x: function () {
      console.log('x open');
	  return this.y;
    }
  },

  watch: {
    y: function (newVal, oldVal) {
      console.log('y open');
      return this.y;
    }
  },

  methods: {
	z: function() {
	  console.log('z open');
	  return 'z';
	}
  }
})

3초 후에 y값을 바꾼다. y값을 바꾸면 y를 관찰하고 있던 y가 실행되며, y에 종속성이 있는 x 역시도 실행된다.

y open

x open

자 그럼 아래와 같은 템플릿은 어떨까?

<div id="example">
</div>

선언한 값들을 참조하지 않았다. 3초 후에 y값을 바꾸면

y open

computed는 아예 실행되지 않는다! 사용되지 않았으므로.

결론

• watch를 사용해야할 경우

1. mustache(템플릿 표현식) 없이 값의 변화를 관찰하고 싶을때는 watch를 사용한다.
2. 비동기적 처리시 사용한다!
3. 값이 바뀔 때마다 매번 호출되어야 할 경우
4. 연산을 얼마나 자주 수행하는지 제한가능(lodash의 debounce 이용)

• computed 사용해야 할 경우

1. 종속된 값의 변화를 관찰하고 싶은 경우
2. mustache(템플릿 표현식) 을 사용하는 경우
3. 동기 호출에 무관할 경우
4. input의 v-model로 서버호출이 필요한데 computed 를 사용할 경우, 입력이 멈춰버린다. 값을 직접 리턴해야하기 때문.
5. 동일한 인풋 값에 대해선, 캐싱이 적용된다!

 

Reference

Vue.js Quick Start 원형섭

https://kr.vuejs.org/v2/guide/computed.html

computed와 watch — Vue.js

https://skout90.github.io/2018/01/24/Vue/1.1.Computed-VS-Watch/

01.1. Computed VS Watch vs Method 정리