这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

建议

• 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：

2、尽量不要watch数组，如果非得监控数组的变化，就设置一个flag，数组变flag变，watch对应的flag来处理。

经网友补充建议：

不考虑性能的话，深度监听即可。