vue中watch监听对象的变化,watch监听vuex中数据改变
本文主要介绍了利用watch监控和处理vue项目中的数据变化，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
vue数据更改由watch监控，以监控当前的vue文件数据。如何正确使用watch监控属性变化？监控对象初始化变量触发监控回调的基本用法。
vue数据变化被watch监听处理
监听当前vue文件数据
例如，当前vue文件的数据具有以下属性：
data() {
返回{
dialogFormVisible: false，
}
}
监控dialogFormVisible变量的数据变化，代码如下：
观察：{
dialogFormVisible:function(new val，oldVal) {
alert(纽瓦尔)；
alert(old val)；
}
}
监听vuex中的数据
如果vuex中声明的数据如下：
导出默认的新Vuex。商店({
状态：{
头像： ，
},
突变：{}，
动作：{}，
模块：{}
});
被监控的代码如下：
观察：{
$ store . state . avatar :function(new value，oldValue) {
.
}
},
如何正确使用watch监听属性变化
在Vue中，监听器可以用来监听属性的变化，并根据属性的变化做出响应。但是到了复杂数据(比如Object，但是一般不需要数组，因为Vue对数组做了特殊处理)的监控，就比较复杂了。本文解释了使用watch监视属性变化(包括复杂数据)的方法。
基本用法
Vue watch最重要的使用场景是根据某个属性的变化执行一些业务逻辑：
模板
输入类型=数字 v-模型.数字=计数器/
/模板
脚本
导出默认值{
名称：计数器，
数据：函数(){
返回{
计数器：0，
};
},
观察：{
计数器：函数(newV，oldV) {
console.log(计数器从%d更改为%d ，newV，oldV)；
},
}
};
/脚本
watch的基本用法非常简单：为要监控的属性定义一个同名的函数。函数的第一个参数是变化后的值，第二个参数是变化前的值。
监听object
首先，让我们回顾一下JavaScript中的一个概念：复杂数据变量。之所以“复杂”，是因为变量只是一个引用，类似于C中的指针，它保存的不是真正的数据，而是数据的地址。例如，对于一个对象变量，添加属性、删除属性、修改属性值都不会改变地址，也就是说对象变量没有改变。不管用什么框架，基本定理都必须成立，所以在Vue中监控对象也是一个难题，尤其是嵌套数据的监控。
这里的变更是指地址的变更，触发变更最简单的方式就是重新分配。
模板
差异
labelup触发器{{ counter.up }}次/label
button @click=onTrigger(up )向上触发/button
英国铁路公司
labeldown触发器{{ counter.down }}次/label
button @click=onTrigger(down )向下触发/button
/div
/模板
脚本
导出默认值{
名称：计数器，
数据：函数(){
返回{
计数器：{
向上：0，
向下：0，
},
};
},
方法：{
onTrigger:函数(类型){
this . counter[type]=1；
}
},
观察：{
计数器：函数(newV，oldV) {
//不会被触发
console.log(计数器从%o更改为%o ，newV，oldV)；
},
}
};
/脚本
不会触发对计数器的监视，因为this . counter[type]=1；它不改变this.counter(地址不变)。如果我想监控这种变化，我应该怎么做？一般来说，有两种方式：
使用deep参数
观察：{
计数器：{
处理程序：函数(newV，oldV) {
console.log(计数器从%o更改为%o ，newV，oldV)；
},
深：真的，
}
}
你需要使用完整形式的watch来使用deep: handler是一个监视器回调函数。deep: true指定不仅要监视counter的变化，还要监视其内部属性的变化，所以只能在counter.up或counter.down发生变化时启动处理程序回调。
重新赋值
方法：{
onTrigger:函数(类型){
//重新分配触发了变化
this.counter={
.这个柜台，
[类型]:this . counter[类型] 1，
};
}
},
观察：{
计数器：函数(newV，oldV) {
//不会被触发
console.log(计数器从%o更改为%o ，newV，oldV)；
},
}
两种方法各有什么优缺点？使用deep参数会增加对每层数据的监控，当层更深时会消耗性能，Vue无法监控属性的添加或删除。所以一般来说，重赋值是比较好的解决方案，但是如果只是想监控内部嵌套的数据，重赋值就比较重，所以Vue也提供了一种直接监控嵌套属性变化的方式：
通过路径监听内部数据
观察：{
counter.up: function(newV，oldV) {
console.log(counter.up从%d更改为%d ，newV，oldV)；
},
counter.down :函数(newV，oldV) {
console.log(counter.down从%d更改为%d ，newV，oldV)；
},
}
这样就可以避免使用deep带来的性能消耗问题。在只响应一个内部属性变化的场景下比较合适，但是在被监控的路径数据仍然是复杂数据的场景下还是要注意。
初始化变量触发监听回调
使用watch监控变化时，变量的初始值不会触发监控功能。如果要更改此默认设置，可以使用immediate参数，该参数类似于deep:
观察：{
计数器：{
处理程序：函数(newV，oldV) {
console.log(计数器从%o更改为%o ，newV，oldV)；
},
即时：真的，
}
}
这样，当初始值被赋值时，监控功能将被触发，其中第一个参数是初始值，第二个参数是未定义的。
总结：手表可以监控属性的变化，使用方法很多。了解每种方式的使用场景可以节省开发时间并优化性能。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。