computed 和 watch的区别

1. computed 是计算值，根据所依赖的数据动态显示新的计算结果，computed的值只有在getter执行后才会有缓存，即只有在他所依赖的属性值改变之后，下一次获取的computed值才会重新调用对应的getter来计算；computed实际上是计算属性，调用其内部属性的时候不需要加括号 示例

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

结果message会变成olleH

2. watch像是对于data的数据监听回调，当data的数据变化时执行回调，vue实例将会在实例化时调用$watch()，遍历 watch 对象的每一个 property 示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2// => new: 2, old: 1

注意：深度监听对应的函数名必须为handler，否则无效 watch没有缓存,但是可以通过添加deep:true来深层监听,使用immediate:true来表示在第一次渲染函数