vue中watch的使用问题

建议

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数组！