Vue中computed和watch的区别

computed和watch都是用于观察data的数据变化的选项。那它们的主要区别是什么呢？

computed

computed用于计算属性值

1. 成员中可以只定义一个函数作为只读属性，也定义成一个get和set作为读写属性

new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus //调用时无需加括号

2. 根据依赖自动缓存，如果依赖不变，缓存就不会去改变，属性值就不会重新被计算

watch

1. watch用于监听一个值，属性发生改变，就执行一个函数

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    //监听属性a的变化，会传一个新值val和一个旧值oldVal，可以应用于回退操作
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 表达式：方法名
    b: 'someMethod',
    //使用deep: true，该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，即子元素改变，就等同于被监听的父元素改变
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 使用immediate: true，该回调将会在侦听开始之后被立即调用，即元素挂载后立即执行
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // 可以监听二级属性
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

2. 注意点：watch中的函数不能用箭头函数来表示，由于箭头函数无法指定this，如果没有范围限制，那么this指的就是windows变量，就无法通过this来指向自身vue实例。

computed和watch的区别

1. computed支持缓存，watch不支持缓存。
2. computed是根据依赖改变与否来更新值，watch是属性改变就会触发。