Vue技术—深度监视

本文主要是介绍Vue技术—深度监视，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

深度监视

1.Vue中的watch默认不检测对象内部值的改变
2.配置deep:true可以检测对象内部值改变

备注：
1.Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以
2.使用watch时根据数据的具体结构，决定是否采用深度监听

<div id="root"><h2>今天天气很{{info}}</h2><button @click="change">切换天气</button><hr/><h3>a的值是:{{number.a}}</h3><button @click="number.a++">点我让a++</button><h3>b的值是:{{number.b}}</h3><button @click="number.b++">点我让b++</button>
</div>

const vm = new Vue({el:"#root",data:{ishot:true,number:{a:1,b:1}},computed:{info(){return this.ishot : '炎热' : '凉爽'}},methods:{change(){this.ishot = !this.ishot}},watch:{ishot:{immediate:true,//初始化时让handler调用一下//handler什么时候被调用？当ishot发生改变时handler(newvalue,oldvalue){console.log('ishot被修改了',newvalue,oldvalue)}},//监视多级结构中某个属性的变化/*'number.a':{handler(){console.log('a被修改了')}}*///监视多级结构中所有属性的变化number:{deep:true,handler(){console.log('number改变了')}}}
})

这篇关于Vue技术—深度监视的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---