vue2watch监听数组变化

Vue2中可以使用$watch方法来监听数组的变化。具体实现方法如下：
watch: {
arrayData: {
handler: function (newVal, oldVal) {
console.log('arrayData changed')
},
deep: true
}
}
登录后复制
其中，arrayData是需要监听的数组，handler是当数组发生变化时需要执行的函数，deep:true表示需要深度监听数组的变化。
除了数组，Vue2也可以使用$watch方法来监听对象和变量的变化。具体实现方法如下：
watch: {
objData: {
handler: function (newVal, oldVal) {
console.log('objData changed')
},
deep: true
},
varData: function (newVal, oldVal) {
console.log('varData changed')
}
}
登录后复制
其中，objData是需要监听的对象，varData是需要监听的变量。它们的实现方法与数组的实现方法类似。

相关问题

vue2 watch 监听数组

在Vue2中，如果要监听数组的变化，可以使用watch方法来监听数组，但是需要注意的是，如果数组中的元素发生改变，watch方法是无法检测到的，因为Vue2只能监听到数组的变异方法，而不是数组中元素的变化。
下面是一个例子，演示如何使用watch方法监听数组的变化：
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
list: ['apple', 'banana', 'orange']
}
},
watch: {
list: function(newVal, oldVal) {
console.log('list changed:', newVal, oldVal);
}
},
mounted() {
// 修改数组，会触发watch方法
this.list.push('watermelon');
}
}
</script>
登录后复制
在上面的例子中，我们在watch选项中监听了list数组的变化。当我们在mounted钩子函数中向数组中添加一个元素时，会触发watch方法，并输出新旧值。
然而，如果我们直接修改数组中的某个元素，watch方法是无法检测到的。如果要监听数组中元素的变化，可以使用$watch方法或者使用Vue提供的$set方法将数组中的元素设置为响应式数据。

vue2watch监听数组中所有对象值的变化

可以通过深度监听（deep watch）来实现，即在监听对象中设置 deep: true。例如：
watch: {
myArray: {
handler: function(newVal, oldVal) {
console.log('myArray changed')
},
deep: true
}
}
登录后复制
这样当 myArray 中的任何对象值发生变化时，都会触发回调函数。注意，深度监听会带来一定的性能开销，应根据具体情况使用。