computed

computed是计算。
如果需要对某些值进行计算，并使用其得出的结果，就适合用computed。
可以直接使用要接收值的变量作为计算属性，官网例子：

  1. <div id="example">
  2.   <p>Original message: "{{ message }}"</p>
  3.   <p>Computed reversed message: "{{ reversedMessage }}"</p>
  4. </div>
  1. var vm = new Vue({
  2.   el: '#example',
  3.   data: {
  4.     message: 'Hello'
  5.   },
  6.   computed: {
  7.     // 计算属性的 getter
  8.     reversedMessage: function () {
  9.       // `this` 指向 vm 实例
  10.       return this.message.split('').reverse().join('')
  11.     }
  12.   }
  13. })

computed有缓存功能
如果计算依赖的计算元素没发生改变，就会自动使用缓存，减少开销，不会重新计算。
注意：getter和setter默认不会做缓存，Vue做了特殊处理。

watch

watch是用来监听数据变化的。具有两个参数（新值，旧值），同样能计算得出结果，执行回调。
它是异步的，Vue自己封装了异步调用$nextTick，代替setTimeout，起到同样的作用。
watch具有两个选项：immediate和deep。
immediate如果设置为true，表示第一次渲染时，就调用这个watch项，反之则不调用。deep如果为true，就会在监听一个对象时，监听对象的内部的属性的变化，反之则只监听对象本身。