vue数组监听怎么实现
监听数组变化的方法
Vue.js 提供了多种方式来监听数组的变化，主要依赖于其响应式系统。以下是几种常见的实现方法：
使用 Vue 的响应式系统
Vue 通过重写数组的变异方法（如 push、pop、shift、unshift、splice、sort、reverse）来实现对数组的监听。这些方法被调用时，Vue 能够检测到变化并触发视图更新。
data() {
return {
items: [1, 2, 3]
}
},
methods: {
addItem() {
this.items.push(4); // 触发响应式更新
}
}使用 Vue.set 或 this.$set
直接通过索引修改数组元素时，Vue 无法检测到变化。此时可以使用 Vue.set 或 this.$set 方法。
methods: {
updateItem(index, newValue) {
this.$set(this.items, index, newValue); // 触发响应式更新
}
}使用 watch 监听数组
通过 watch 可以监听数组的变化，并在变化时执行回调函数。
watch: {
items: {
handler(newVal, oldVal) {
console.log('数组发生变化:', newVal);
},
deep: true // 深度监听
}
}使用 computed 计算属性
通过计算属性可以监听数组的变化并返回新的计算结果。
computed: {
itemCount() {
return this.items.length; // 当 items 变化时，itemCount 会自动更新
}
}使用 Vue.observable（Vue 2.6+）
在 Vue 2.6+ 中，可以使用 Vue.observable 创建响应式对象或数组。
const state = Vue.observable({
items: [1, 2, 3]
});
state.items.push(4); // 触发响应式更新注意事项
- 直接通过索引修改数组元素（如
this.items[0] = newValue）不会触发响应式更新。 - 使用
splice方法可以替代直接索引修改，例如this.items.splice(0, 1, newValue)。 - 对于大型数组或复杂数据结构，建议使用
deep: true进行深度监听，但可能会影响性能。
