watch监听vuex,vue监听watch监听全局对象
本文主要介绍了使用watch Listener的vue的基本用法，很不错，有一定的参考价值。有需要的朋友可以参考一下。
:
目录
1.以下代码是watch 2的简单用法。即时监控。处理程序方法4。深层属性总结。
一般来说，监听器是用来监控数据变化的，默认情况下，在数据发生变化时执行。
被监控的数据名作为函数名放在这里。这个函数有两个参数，一个是新值，一个是旧值。
在vue中，watch用于响应数据的变化。手表大致有三种用法。
1、下面代码是watch的一种简单的用法
div id=应用程序
输入类型=text v-model=firstName /
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
名字：“张”
},
观察：{
名字：(新瓦尔，旧瓦尔){
//firstName是你要监控的数据的名字，你想监控谁就可以用它的函数名，比如v-model的firstName。
//newVal:表示改变后的值，即第一个参数。不要改变位置。
//oldVal:表示更改前的值，
console.log({newVal，old val })；//{新伐：陈，旧伐：张 }
}
//直接写一个监控函数，每次cityName的值变化时执行该函数。
//也可以直接在被监控的数据后添加字符串形式的方法名：firstName: nameChange
},
方法：{
nameChange(){
}
}
})
Vm.firstName= Chen//更改监视器的值
/脚本
2、immediate 立即监听
在使用watch的基本用法时，有一个特点，就是第一次绑定数值时，不会执行监控功能，只有在数值发生变化时才会执行。如果我们需要在最初绑定值时执行函数，我们需要使用immediate属性。
观察：{
名字：{
处理程序(新名称，旧名称){
this . full name=newName this . last name；
},
{ immediate: true }
}
}
被监控的数据以对象的形式写入，包括handler方法和immediate。上面简单的写法就是我们写的函数其实就是写这个handler方法，默认省略。
3、handler方法
div id=应用程序
差异
pNumber: {{ myNumber }}/p
p number:input type= text v-model . number= my number /p
/div
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本
新Vue({
埃尔： #app ，
数据：{
我的号码：“大卫”
},
观察：{
我的号码：{
处理程序(newVal，oldVal) {
console.log(newVal ，new val)；
console.log(oldVal ，old val)；
},
//当//immediate为真时，回调函数会被立即触发；如果为false，如上例所示，回调将不会立即执行。
即时：正确
}
}
})
/脚本
//handler方法是需要在你的手表中执行的方法。
4、 deep属性
我们如何监控对象或对象中的属性？然后引入深层属性。它的功能是解决这个问题的关键。
div id=root
pobj.a: {{obj.a}}/p
pobj.a:输入类型=text v-model=obj.a/p
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本
新Vue({
el: #root ，
数据：{
目标
甲：123
}
},
观察：{
目标
处理程序(新名称，旧名称){
console.log(新名称，旧名称)；
},
即时：真的，
深：真的
}
}
})
/脚本
如果不在上面的代码中添加deep:true，就不会在console中执行，只会在第一次执行，输出结果是未定义的。
默认情况下，handler只监听obj的引用的变化，只有在我们给obj赋值的时候才会监听。
这时候可以用deep进行深入观察。侦听器会一层一层地向下遍历，将这个侦听器添加到对象的所有属性中，但是这样消耗太多。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。