watch属性高级用法 deepVSimmediate

一、watch默认绑定，页面首次加载时，是不会执行的。只有值发生改变才会执行。

watch当我们使用immediate时初始化时会触发时间，使用deep深度监听也不会。

watch: {
        siteType: {
            handler (newValue, oldValue) {
                this.personal()
            },
            deep: true
            // immediate: true  //表示在页面初始化时立即执行一次回调函数；
        }
},

二，监听的是对象类型，当手动修改对象的某个属性时，发现是无效的。需要使用deep属性

deep为true，就可以监测到对象中每个属性的变化。它会一层层遍历，给这个对象的所有属性都加上这个监听器。但是这样性能开销会比较大，修改任何一个属性，都会出发这个监听器里的handler

data:{
    obj:{
      num:1
    }
},
watch:{
    obj:{
      handler(newName,oldName){
          //执行代码
      },
      deep:true //为true，表示深度监听，这时候就能监测到a值变化
    }
}

三 deep优化 使用字符串监听减少开支

data:{
    obj:{
      num:1
    }
},
watch:{
    'obj.num':{
      handler(newName,oldName){
          //执行代码
      },
      deep:true //为true，表示深度监听，这时候就能监测到a值变化
    }
}