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 // 深度监听
}
}使用 Vue.observable
在 Vue 2.6+ 中，可以使用 Vue.observable 创建一个响应式对象，适用于需要手动管理响应式状态的情况。
const state = Vue.observable({ items: [1, 2, 3] });
state.items.push(4); // 自动触发响应式更新监听数组变化的最佳实践
避免直接修改数组索引
直接通过索引修改数组元素不会触发响应式更新，应使用 this.$set 或数组的变异方法。
使用计算属性
如果需要对数组进行过滤或转换，可以使用计算属性来派生新的数组，避免直接操作原始数组。
computed: {
filteredItems() {
return this.items.filter(item => item > 2);
}
}使用 splice 替代直接赋值
需要替换数组中的多个元素时，使用 splice 方法而不是直接赋值。
methods: {
replaceItems(newItems) {
this.items.splice(0, this.items.length, ...newItems);
}
}注意事项
- Vue 无法检测到直接通过索引修改数组元素的变化（如
this.items[0] = newValue）。 - 使用
watch监听数组时，deep: true可能会导致性能问题，尤其是对于大型数组。 - 在 Vue 3 中，响应式系统基于 Proxy，对数组的监听更加高效和灵活。
