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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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

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

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

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

y open

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

결론

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

  1. 종속된 값의 변화를 관찰하고 싶은 경우

  2. mustache(템플릿 표현식) 을 사용하는 경우

  3. 동기 호출에 무관할 경우

    input의 v-model로 서버호출이 필요한데 computed 를 사용할 경우, 입력이 멈춰버린다. 값을 직접 리턴해야하기 때문.

  4. 동일한 인풋 값에 대해선, 캐싱이 적용된다!

Reference

Vue.js Quick Start 원형섭

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