vue中watch的使用问题

最新推荐文章于 2025-05-30 09:08:25 发布

Beam007

最新推荐文章于 2025-05-30 09:08:25 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/90231671

vue 专栏收录该内容

27 篇文章

订阅专栏

本文探讨了在Vue框架中使用watch属性与原生事件监听器的性能差异，建议优先使用原生事件以提升应用性能。同时，文章详细分析了watch数组时可能出现的诡异现象，并给出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

建议

1、如果有change原生事件尽量用原生，不要用watch，毕竟watch只是封装了一层，性能各方面不如原生方法。
2、尽量不要watch数组，如果非得监控数组的变化，就设置一个flag，数组变flag变，watch对应的flag来处理。

watch数组的一个奇怪现象

当前有两个数组：

tempY = ["label1", "label2", ... ,"labeln"]
tempZ = [
	[10, 11, 12], [20, 21, 22], ... , [100, 101, 102]
]

最开始将这两个数组赋给2个变量

y = tempY
z = tempZ

然后修改数组的值

tempY.push("label123")
tempZ.push([123, 456, 789])

同时使用watch观察四个量的变化

watch: {
	y (val1, val2) {
	  console.log(val1, val2) // tempY.push("label123")时触发，且val1和val2相同。
	},
	tempY (val1, val2) {
	  console.log(val1, val2) // tempY.push("label123")时触发，且val1和val2相同。
	},
	z (val1, val2) {
	  console.log(val1, val2) // 不会触发打印
	},
	tempZ (val1, val2) {
	  console.log(val1, val2) // tempZ.push([123, 456, 789])时触发，val1比val2多[123, 456, 789]
	}
}

由上可知 z 和 tempZ 是正常的，但是 y 和 tempY 见鬼了样的。
因为数组是指向变量，所以 tempY 变了 y 会跟着变所以同时触发吗？
但是为什么 z 和 tempZ 又不满足这个原因呢，因为是二维数组吗？
为什么呢？？？
综上所述，建议见2：尽量不要watch数组！