文章目录
普通监视
1.当被监视的属性变化时,回调函数自动调用,进行相关2操作
2.监视的属性必须存在,才能进行监视
3.监视的两种写法
(1).new vue时传入watch配置
(2).通过vm.$watch监视
new Vue({ el:'#root', data: { isHot:true, numbers:{ a:1, b:1 } }, computed:{ info(){ return this.isHot ? 'yanre' : 'liangshuang' } }, methods: { change(){ this.isHot = !this.isHot } }, watch:{ // isHot:{ // //handler当ishot改变时被调用 // handler(newValue,oldValue){ // console.log('ishot被修改了',newValue,oldValue); // } // } //简写 isHot(newValue,oldValue){ console.log('ishot改变了',newValue,oldValue); } } })
vm.$watch('isHot',{ immediate:true,//初始化时让handler调用一下 handler(newValue,oldValue){ console.log('ishot被修改了',newValue,oldValue); } })
深度监视
(1).vue中的watch默认不检测对象内部值的改变 (一层)
(2).配置deep:true可以检测对象内部值的改变(多层)
注:
(1)vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以
(2)使用watch时根据数据的具体结构,决定是否采用深度监视