Vue 中的 computed 和 watch 的区别

172 阅读1分钟

computed

computed 是计算属性

  1. computed 是用来计算一个值的,这个值调用的时候不需要加括号。
  2. computed 的值会被缓存,如果依赖的响应式 property 不变,就不会重新计算。

计算属性不在 data 中,计算属性新值的相关已知值在 data 中。别人变化影响自身。

const vm = 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
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch

watch 是监听数据的变化

监听 data 中数据的变化,监听的数据就是 data 中的已知值。自身变化影响别人。

如果某个属性变化了,就会执行一个回调函数。

提供两个选项,immediate 回调会在监听开始之后被立即调用;deep 回调会在任何被监听的对象的 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

总结

  • computed 擅长处理的场景:一个数据受多个数据影响
  • watch 擅长处理的场景:一个数据影响多个数据