computed

computed 是计算属性

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

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

  1. const vm = new Vue({
  2.     data: { a: 1 },
  3.     computed: {
  4.         // 只读
  5.         aDouble: function () {
  6.             return this.a * 2
  7.         },
  8.         // 读写
  9.         aPlus: {
  10.             get: function () {
  11.                 return this.a + 1
  12.             },
  13.             set: function (v) {
  14.                 this.a = v - 1
  15.             }
  16.         }
  17.     }
  18. })
  19. vm.aPlus // => 2
  20. vm.aPlus = 3
  21. vm.a       // => 2
  22. vm.aDouble // => 4

watch

watch 是监听数据的变化

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

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

提供两个选项，immediate 回调会在监听开始之后被立即调用；deep 回调会在任何被监听的对象的 property 改变时被调用，不管嵌套的层级深度。

  1. var vm = new Vue({
  2.   data: {
  3.     a: 1,
  4.     b: 2,
  5.     c: 3,
  6.     d: 4,
  7.     e: {
  8.       f: {
  9.         g: 5
  10.       }
  11.     }
  12.   },
  13.   watch: {
  14.     a: function (val, oldVal) {
  15.       console.log('new: %s, old: %s', val, oldVal)
  16.     },
  17.     // 方法名
  18.     b: 'someMethod',
  19.     // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
  20.     c: {
  21.       handler: function (val, oldVal) { /* ... */ },
  22.       deep: true
  23.     },
  24.     // 该回调将会在侦听开始之后被立即调用
  25.     d: {
  26.       handler: 'someMethod',
  27.       immediate: true
  28.     },
  29.     // 你可以传入回调数组，它们会被逐一调用
  30.     e: [
  31.       'handle1',
  32.       function handle2 (val, oldVal) { /* ... */ },
  33.       {
  34.         handler: function handle3 (val, oldVal) { /* ... */ },
  35.         /* ... */
  36.       }
  37.     ],
  38.     // watch vm.e.f's value: {g: 5}
  39.     'e.f': function (val, oldVal) { /* ... */ }
  40.   }
  41. })
  42. vm.a = 2 // => new: 2, old: 1

总结

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