vue2 watch中for的使用
时间: 2023-12-28 18:22:23 浏览: 65
在Vue2中,可以使用watch来监听一个数组或对象的变化。当数组或对象中的某个属性发生变化时,watch会自动执行相应的回调函数。而在watch中使用for循环来监听数组或对象中的每个元素或属性的变化是非常常见的用法。
具体实现方法如下:
1. 在Vue实例中定义一个数组或对象,并在watch中监听它的变化。
2. 在watch中使用for循环遍历数组或对象中的每个元素或属性,并为每个元素或属性添加一个监听器。
3. 在监听器中定义相应的回调函数,当元素或属性发生变化时,回调函数会自动执行。
下面是一个示例代码,演示了如何在Vue2中使用watch中for循环来监听数组的变化:
```
data() {
return {
list: [1, 2, 3, 4, 5]
}
},
watch: {
list: {
handler: function (newVal, oldVal) {
for (let i = 0; i < newVal.length; i++) {
this.$watch(
() => this.list[i],
(newItem, oldItem) => {
console.log(`list[${i}] changed from ${oldItem} to ${newItem}`)
}
)
}
},
deep: true
}
}
```
在上面的代码中,我们定义了一个名为list的数组,并在watch中监听它的变化。在handler函数中,我们使用for循环遍历数组中的每个元素,并为每个元素添加一个监听器。当数组中的某个元素发生变化时,相应的回调函数会自动执行。
阅读全文