vue中watch监听不到变化的解决
作者:尤雨溪不懂VUE 时间:2024-04-30 10:41:33
watch监听不到对象内部的变化
有的时候vue会出现这种现象,无法监听到复杂对象内部的变化:当对象里面原本有某一个属性,并对这个属性操作时,watch是可以监听到当前属性的变化的。但是,若对象里面本没有这个属性的时候,在操作时将属性添加进去,同时包括之后对这个属性的操作,watch是都检测不到的。
这是因为vue的watch会在初始化的时候通过object.defineProperty给对象的每一个属性都添加watcher来监听内部的变化。所以,后期添加上去的属性是无法检测到的。
解决方法:
如果想在初始化后添加一个属性并进行监听操作,可以使用$set:
// this.$set(object, key, value)
// 使用this.$set就可以监听到
this.$set(this.obj, 'a', Math.random())
watch的handler方法的两个参数值相同
一个数据,如果值发生了变化,如果想要记录变化前和变化后的两个值,可以使用handler方法,第一个参数为变化后的新值,第二个为变化前的旧值。
但是如果这个值是复杂对象,如果想记录里面的属性的变化,使用handler,两个参数均为变化后的新值。
解决方法:
结合计算属性、序列化、反序列化生成新的对象,来避免此问题
data () {
return {
obj: {}
}
},
computed: {
// 如果想要得到差异内容,可以结合计算属性、序列化、反序列化生成新的对象,来避免此问题 。
obj2 () {
return JSON.parse(JSON.stringify(this.obj))
}
},
watch: {
obj2: {
handler (newVal, oldVal) {
console.log('data变化了')
console.log(newVal, oldVal)
},
deep: true
}
},
全部代码
<template>
<div>
<button @click="clickFn">++++</button>
</div>
</template>
<script>
export default {
name: 'Mall',
data () {
return {
// !监听时给每一个属性都添加getter和setter,变化了,就触发handler函数,如果后期添加属性,这个属性不可以被监听到
// obj: {
// a: 10
// }
// !这种是不可以被监听到的
// 因为watch是通过Object.defineProperty()给对象的每一个现有属性增加 *
// 在后面直接添加a属性,身上没有 * ,所以不会被监听到
obj: {}
}
},
computed: {
// 如果想要得到差异内容,可以结合计算属性、序列化、反序列化生成新的对象,来避免此问题 。
obj2 () {
return JSON.parse(JSON.stringify(this.obj))
}
},
watch: {
obj2: {
handler (newVal, oldVal) {
console.log('data变化了')
console.log(newVal, oldVal)
},
deep: true
}
},
methods: {
clickFn () {
// this.obj.a = Math.random()
// this.$set(object, key, value)
// 使用this.$set就可以监听到
this.$set(this.obj, 'a', Math.random())
}
}
}
</script>
来源:https://juejin.cn/post/7182777720672256060
标签:vue,watch,监听
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
OpenCV-Python使用cv2实现傅里叶变换
2023-07-08 05:11:06
![](https://img.aspxhome.com/file/2023/2/76692_0s.png)
Go语言开发中redis的使用详解
2024-02-14 12:58:27
Python socket如何实现服务端和客户端数据传输(TCP)
2023-08-25 01:02:43
![](https://img.aspxhome.com/file/2023/3/127093_0s.png)
appium+python adb常用命令分享
2022-12-27 09:16:24
![](https://img.aspxhome.com/file/2023/7/80537_0s.jpg)
Python time模块之时间戳与结构化时间的使用
2024-01-02 09:07:51
![](https://img.aspxhome.com/file/2023/3/66383_0s.png)
PyQT5 emit 和 connect的用法详解
2022-02-08 15:15:11
![](https://img.aspxhome.com/file/2023/4/87944_0s.jpg)
将多宿主计算机配置为SQL Server访问
2011-01-04 16:17:00
详解Scrapy Redis入门实战
2023-04-14 11:39:08
![](https://img.aspxhome.com/file/2023/1/76111_0s.png)
Python之二维正态分布采样置信椭圆绘制
2021-04-08 06:39:09
![](https://img.aspxhome.com/file/2023/4/83824_0s.jpg)
配置node服务器并且链接微信公众号接口配置步骤详解
2024-05-03 15:54:12
python字符串定义的三种方式
2022-05-27 08:17:57
ACCESS数据库的压缩,备份,还原,下载,删除的实现
2024-01-18 16:16:26
Python使用base64模块进行二进制数据编码详解
2023-08-26 20:13:13
用python实现英文字母和相应序数转换的方法
2023-11-20 13:30:10
Python使用ffmpeg合成视频、音频的实现方法
2022-01-24 17:39:06
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2021-10-06 12:37:55
![](https://img.aspxhome.com/file/2023/2/127252_0s.jpg)
SQL Server常见问题及解决方法分享
2024-01-15 01:45:30
![](https://img.aspxhome.com/file/2023/4/108534_0s.png)
分享Sql Server 存储过程使用方法
2024-01-13 06:42:36
如何编制一个产生随机密码的函数?
2009-11-08 19:06:00
SQL Server 2005恢复数据库详细图文教程
2024-01-14 10:18:02
![](https://img.aspxhome.com/file/2023/3/102063_0s.png)