Vue中的watch监视属性怎么应用
这篇“Vue中的watch监视属性怎么应用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的watch监视属性怎么应用”文章吧。
一、监视属性watch
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法
（1）new Vue时传入watch配置
（2）通过vm.$watch监视
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>天气案例_监视属性</title><!--引入Vue--><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!--监视属性watch：1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在，才能进行监视！！3.监视的两种写法：(1).newVue时传入watch配置(2).通过vm.$watch监视--><!--准备好一个容器--><divid="root"><h2>今天天气很{{info}}</h2><button@click="changeWeather">切换天气</button></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止vue在启动时生成生产提示。constvm=newVue({el:'#root',data:{isHot:true,},puted:{info(){returnthis.isHot?'炎热':'凉爽'}},methods:{changeWeather(){this.isHot=!this.isHot}},/*watch:{isHot:{immediate:true,//初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}}*/})vm.$watch('isHot',{immediate:true,//初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}})</script></html>二、深度监视
1.Vue中的watch默认不监视对象内部值的改变（一层）
2.配置deep:true可以监视对象内部值的改变（多层）
备注：
vue自身可以监视对象内部值的改变，但vue提供的watch默认不可以
使用watch时根据数据的具体结构，决定是否采用深度监视
天气案例：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>天气案例_深度监视</title><!--引入Vue--><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!--深度监视：(1).Vue中的watch默认不监测对象内部值的改变（一层）。(2).配置deep:true可以监测对象内部值改变（多层）。备注：(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！(2).使用watch时根据数据的具体结构，决定是否采用深度监视。--><!--准备好一个容器--><divid="root"><h2>今天天气很{{info}}</h2><button@click="changeWeather">切换天气</button><hr/><h4>a的值是:{{numbers.a}}</h4><button@click="numbers.a++">点我让a+1</button><h4>b的值是:{{numbers.b}}</h4><button@click="numbers.b++">点我让b+1</button><button@click="numbers={a:666,b:888}">彻底替换掉numbers</button>{{numbers.c.d.e}}</div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止vue在启动时生成生产提示。constvm=newVue({el:'#root',data:{isHot:true,numbers:{a:1,b:1,c:{d:{e:100}}}},puted:{info(){returnthis.isHot?'炎热':'凉爽'}},methods:{changeWeather(){this.isHot=!this.isHot}},watch:{isHot:{//immediate:true,//初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}},//监视多级结构中某个属性的变化/*'numbers.a':{handler(){console.log('a被改变了')}}*///监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log('numbers改变了')}}}})</script></html>三、监视属性简写
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>天气案例_监视属性_简写</title><!--引入Vue--><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!--准备好一个容器--><divid="root"><h2>今天天气很{{info}}</h2><button@click="changeWeather">切换天气</button></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止vue在启动时生成生产提示。constvm=newVue({el:'#root',data:{isHot:true,},puted:{info(){returnthis.isHot?'炎热':'凉爽'}},methods:{changeWeather(){this.isHot=!this.isHot}},watch:{//正常写法/*isHot:{//immediate:true,//初始化时让handler调用一下//deep:true,//深度监视handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}},*///简写/*isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this)}*/}})//正常写法/*vm.$watch('isHot',{immediate:true,//初始化时让handler调用一下deep:true,//深度监视handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}})*///简写/*vm.$watch('isHot',(newValue,oldValue)=>{console.log('isHot被修改了',newValue,oldValue,this)})*/</script></html>以上就是关于“Vue中的watch监视属性怎么应用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注主机评测网行业资讯频道。
上一篇：vue2.x,vue3.x使用provide/inject注入的区别是什么
winlogins.exe是什么文件？winlogins.exe是不是病毒
winsock2.6.exe是什么文件？winsock2.6.exe是不是病毒
WinDefendor.dll是什么文件？WinDefendor.dll是不是病毒
系统目录是什么文件？系统目录是不是病毒
wholove.exe是什么文件？wholove.exe是不是病毒
winn.ini是什么文件？winn.ini是不是病毒
w6oou.dll是什么文件？w6oou.dll是不是病毒
winduxzawb.exe是什么文件？winduxzawb.exe是不是病毒
wuammgr32.exe是什么文件？wuammgr32.exe是不是病毒
windiws.exe是什么文件？windiws.exe是不是病毒