vue实现数组监听
Vue 实现数组监听的方法
Vue 通过重写数组的变异方法来监听数组变化，但直接通过索引修改数组或修改数组长度时无法触发响应式更新。以下是几种实现数组监听的方法：
使用 Vue.set 或 vm.$set
对于通过索引直接修改数组元素的情况，可以使用 Vue.set 或实例方法 vm.$set。
this.$set(this.array, index, newValue);使用数组的变异方法
Vue 重写了以下数组方法，使用它们会自动触发视图更新：
push()pop()shift()unshift()splice()sort()reverse()
this.array.splice(index, 1, newValue);监听数组变化
可以通过 watch 监听数组变化，设置 deep: true 可以深度监听。
watch: {
array: {
handler(newVal, oldVal) {
console.log('数组变化了');
},
deep: true
}
}使用 computed 属性
通过计算属性返回数组的某个状态，当数组变化时计算属性会自动更新。
computed: {
arrayLength() {
return this.array.length;
}
}注意事项
- 直接修改数组长度（如
this.array.length = 0）不会触发更新，应使用splice替代。 - 对于嵌套数组或对象，确保它们也是响应式的。
- 在 Vue 3 中，使用
reactive或ref创建的数组可以直接通过索引修改并触发更新。
