vue实现数组
vue实现数组操作
在Vue中操作数组需要使用Vue提供的响应式方法，直接修改数组元素不会触发视图更新。以下是常见的数组操作方法：
添加元素
使用push、unshift或splice方法添加元素：
this.array.push(newItem) // 末尾添加
this.array.unshift(newItem) // 开头添加
this.array.splice(index, 0, newItem) // 指定位置插入删除元素
使用pop、shift或splice方法删除元素：
this.array.pop() // 删除末尾元素
this.array.shift() // 删除开头元素
this.array.splice(index, 1) // 删除指定位置元素修改元素 使用Vue.set或数组索引直接修改：
Vue.set(this.array, index, newValue)
// 或
this.$set(this.array, index, newValue)替换数组 直接赋值为新数组：
this.array = newArray过滤数组 使用filter方法创建新数组：
this.array = this.array.filter(item => item.condition)排序数组 使用sort方法排序：
this.array.sort((a, b) => a.property - b.property)vue数组响应式原理
Vue通过重写数组的变异方法实现响应式，这些方法包括：
push()pop()shift()unshift()splice()sort()reverse()
对于非变异方法如filter、concat、slice等，需要将返回的新数组赋值给原数组才能触发更新。
vue3数组操作变化
Vue3中使用Proxy实现响应式，可以直接通过索引修改数组元素：
const state = reactive({
list: [1, 2, 3]
})
state.list[0] = 99 // 在Vue3中能触发响应但仍推荐使用扩展运算符或Array.from创建新数组：
state.list = [...state.list, newItem]常见问题解决
视图不更新 确保使用Vue提供的变异方法或Vue.set，避免直接通过索引修改数组。
性能优化 对于大型数组，使用Object.freeze冻结非响应式数据，或考虑虚拟滚动方案。
数组监听 使用watch深度监听数组变化：
watch(
() => [...this.array],
(newVal, oldVal) => {
// 处理变化
},
{ deep: true }
)
