Vue2.0的watch属性-（5）

内容介绍：

• watch属性介绍
• watch属性，观测值的三种写法
• watch观测对象注意不能使用箭头函数
• watch的实战-观测数组内所有对象的某个值的变化

watch属性：watch是vue实列的一个属性，它是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    //第一种写法 适用于普通变量（简单类型的值的观测写法）
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 第二种写法：方法名
    b: 'someMethod',
    // 第三种写法：深度 watcher(能观测对象c下多重属性变化)（复杂类型的值的观测写法）
    c: {
      //当c变化后会回调handler函数
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2 // -> new: 2, old: 1

** 注意:不能使用箭头函数定义watcher（回调）函数，因为箭头函数绑定了父级作用域的上下文，所以里面的 this 将不会按照期望指向 Vue 实例**

 watch: {
     // 这里面的this指向了vue实列 ----Vue$3 {_uid: 0, _isVue: true, $options: Object, _renderProxy: Proxy, _self: Vue$3…}
                a: function (val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
    // 箭头函数：这里的this指向的是window-----Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
                b:()=>{
                    console.log(this.a);
                },
                // 深度 watcher
                c: {
                    handler: function (val, oldVal) { /* ... */ },
                    deep: true
                }
            } 

watch的实战-观测数组内所有对象的某个值的变化：
我们常常会遇到请求回来的数据，计算订单的数量和或价格，值变化的时候数量显示也要变化:

    

        {{count}} 
    
    

11-watch属性.gif