vue 中二维数组内容发生变化，不会触发watch方法和刷新视图
在watch中加入deep也无法解决
方法一
重新挂载，虽然会刷新视图但是不会触发watch方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.js" charset="utf-8"></script>
</head>
<body>
<div id='app'>
{{arr}}
<button @click="change">改变</button>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
arr: [
['0', '0'],
['0', '0']
]
},
watch: {
arr: {
// deep: true,
handler: function(newVal, oldVal) {
console.log(arguments)
}
}
},
methods: {
change: function() {
this.arr[0][0] = '1'
// 重新挂载实例，实现数据刷新
this.$mount("#app")
}
}
})
</script>
</body>
</html>方法二：
使用vue的set方法
this.$set(this.arr[0], '0', 1)
这种方法会触发watch事件也会更新视图