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

<body>
    <div id="app">
        <span>{{count}}</span> 
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                count:0,
                items : [
                    {
                        id: 336,
                        title: '炒肉',
                        count: 1,
                        price: 106
                    },
                    {
                        id: 337,
                        title: '生菜',
                        count: 2,
                        price: 225
                    }
                ]
            },
            watch: {
                "items":{
                    handler(){
                        this.count = 0
                        this.items.forEach((item)=>{
                            this.count +=item.count
                        });
                    },
                    deep:true
                }
            }        
        })
    </script>
</body>

11-watch属性.gif

Vue2.0的watch属性-（5）

推荐阅读更多精彩内容