vuewatch监听对象及对应值的变化,vue watch对象属性值改变
本文主要介绍vue如何正确使用watch监控属性变化，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
基本用法Monitor对象使用deep参数通过path重新赋值来监控内部数据初始化变量触发监控器回调总结一下可以在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)；
},
即时：真的，
}
}
这样，当初始值被赋值时，监控功能将被触发，其中第一个参数是初始值，第二个参数是未定义的。
总结
Watch可以用来监控属性的变化，使用方法有很多种。了解每种方式的使用场景可以节省开发时间并优化性能。
使用文档Vue反应性原理Computed vs watch以上是个人经验，希望给大家一个参考，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。