watch

Vue3.0-选项-watch

{ [key: string]: string | Function | Object | Array }

一个对象，键:值对形式---> 需要观察的表达式 : 对应回调函数
值也是方法名(可以写在method) 对象(包含选项)。

var vm = new Vue({
  data: {
    a: 1,   b: 2,   c: 3,   d: 4,   
    e: {  f: {  g: 5    //2层的一个对象
      }}},

deep: true //该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深（对象内部值的变化）
immediate: true  //选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

watch: {
    a: function (val, oldVal) {console.log('new: %s, old: %s', val, oldVal)},
    
    c: {handler: function (val, oldVal) { /* ... */ },
        deep: true,     immediate: true    }, //设定了 deep和 immediate
      
    // 你可以传入回调数组，它们会被逐一调用
    
   e: [   'handle1',  // 数组中第一种，直接使用方法名
           fn2 (val, oldVal) { /* ... */ },  //第二种，直接声明函数
           {handler: fn3 (val, oldVal) { /* ... */ }, /* ... */ }   ], // 第三种，内含多个
      
    
    'e.f': function (val, oldVal) { /* ... */ } 
    // watch   vm.e.f's    value: {g: 5}
    //键:值 对
  }
})

watch的实例方法 / 数据

vm.$watch( expOrFn, callback, [options] )   
参数：                                                                        
{string | Function} expOrFn   

{Function | Object} callback

{Object} [options]
{boolean} deep
{boolean} immediate
返回值：{Function} unwatch

---------例子----------
vm.$watch('a.b.c', function (newVal, oldVal) {
                  // 做点什么
})    // 之后取消观察

vm.$watch 返回一个取消观察函数，用来停止触发回调：

computed

Vue3.0-选项-computed

{ [key: string]: Function | { get: Function, set: Function } }

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
箭头函数的this绑定父级作用域的上下文（建议-->以访问参数的情况-->才使用）

var vm = new Vue({
  data: { a: 1 },
  computed: {
    aDouble: function () {  return this.a * 2  },  // 实际上的仅读取
                   // 可以写为 aDouble() {  return this.a * 2  },
    
                // getter & setter
    aPlus: {
      get() { return this.a + 1 },
      set(v) {this.a = v - 1 }
    }}
})
vm.aPlus   // => 2
vm.aPlus = 3    //走了setter
vm.a       // => 2
vm.aDouble // => 4

Vue-计算属性详解

总结

watch

主要用于监听依赖项的变化，在数据变化时执行一个函数。
可以模拟computed
可选的布尔属性为deep和immediate

computed

主要用于计算属性，调用时无需加括号
有缓存机制---->依赖项不变时不计算

Vue中的computed和watch

watch

watch的实例方法 / 数据

computed

总结