vue中如何使用watch监听数组的变化
Vue是目前前端开发中使用较广泛的框架之一，它提供了许多便捷的方式来实现数据响应式、模板渲染以及组件化等功能。在Vue中，我们经常会使用watch来监听数据的变化，但是，当需要监听数组变化时，我们需要注意一些细节。
在Vue中，我们可以使用watch来监听单个属性或者对象的变化，其基本使用方式如下：
watch: {
// 监听对象属性
obj: {
handler: function (newVal, oldVal) {
// ...
},
deep: true
},
// 监听单个属性
prop: function (newVal, oldVal) {
// ...
}
}如果我们要监听数组变化，需要注意以下几点：
1.使用vm.$watch方法
Vue提供了vm.$watch方法来监控数据变化，该方法返回一个取消监听的函数。这里的vm指的是Vue的实例。对于数组而言，我们可以使用该方法监控数组的变化。其基本使用方式如下：
立即学习“前端免费学习笔记（深入）”；
vm.$watch('arr', function (newVal, oldVal) {
// ...
}, {
deep: true
})这里的arr就是我们需要监控的数组，handler回调函数中的newVal和oldVal分别表示监控到的新值和旧值。另外，由于数组中每个元素都是对象的情况比较常见，因此需要设置deep为true，才能做到深度监听。
需要注意的是，使用vm.$watch方法监听的数组，Vue不会自动对其进行劫持。因此，我们需要手动对数组进行劫持，才能监听到数组的变化。
2.监听数组中的每个元素
如果我们需要监听数组中每个元素的变化，可以使用vm.$watch方法中的immediate和handler参数，代码如下：
arr.forEach(function (item, index) {
vm.$watch(
function () {
return arr[index];
},
{
immediate: true,
deep: true,
handler: function (newVal, oldVal) {
// ...
}
}
);
});这里的immediate为true，意味着在监听的时候就会执行一次回调函数。需要注意的是，上面的代码并没有对整个数组进行劫持，而是单独对每个元素进行监听。
3.利用computed计算属性
Vue中的计算属性可以基于已有的数据计算出新的数据，因此我们可以利用计算属性来监听数组的变化。其基本使用方式如下：
computed: {
// 监听arr数组
arrWatcher: function () {
this.arr; // 调用一次arr，以实现依赖收集
return this.arr;
}
},
watch: {
// 监听计算属性
arrWatcher: {
handler: function (newVal, oldVal) {
// ...
},
deep: true
}
}这里的arrWatcher就是我们定义的计算属性，该计算属性的返回值是监听的数组。在watch中监听该计算属性的变化即可。由于计算属性会自动进行依赖收集，因此当数组变化时，计算属性会自动更新，从而触发watch回调函数。
在使用计算属性监听数组变化的时候，需要注意一点：如果我们只需要监听数组长度的变化而不关心数组中元素的变化，那么可以简单地使用计算属性来实现。但如果需要监听数组中元素的变化，还需要对数组中的每个元素进行劫持，同样需要使用vm.$watch方法。
综上所述，我们可以利用vm.$watch方法、监听数组中的每个元素以及利用计算属性等方式来监听Vue中数组的变化。需要特别注意的是，在使用这些方法的时候，应该对数组进行劫持操作，以确保Vue能够正确地监听到数组的变化。
