十、监视属性和深度监视————温开水的复习笔记

一、监视属性

这个属性用来监视某个数据的变化，并触发相应的回调函数执行

基本用法

（1）添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化，就会触发该回调函数执行

监视属性watch：
    1.当被监视属性变化时，回调函数自动调用，进行相关操作
    2.监视的属性必须存在，才能进行监视
    3.监视的两种方法：
        3.1 new Vue时传入watch配置
        3.2 通过vm.$watch监视

（2）回调函数有2个参数：

        newVal：数据发生改变后的值

        oldVal：数据发生改变前的值

二、深度监视

想要监听对象内部的属性值变化，需要进行相应的配置。

• deep：深度监听，默认false
• handler：回调函数
• immediate：页面初始化时是否触发回调，默认false

var vm = new Vue({
  el:'#app',
  data: {
    name: '温开水1',
    age: 20,
    sister: {
      name: '温开水2',
      sex: '女'
    }
  },
  watch: {
    sister:{
      deep:true,
      handler:function(newVal,oldVal){
        console.log('value is change')
      },
      immediate:true
    }
  }
})

vm.sister.name = '温开水3' // 触发wife属性对应的回调

深度监视：
    1.Vue中的watch默认不监测对象内部值的改变（一层）
    2.配置deep：true可以监测对象内部值改变（多层）
备注：
    1.Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
    2.使用watch时根据数据的具体结构，决定是否采用深度监测