vue实现数组
Vue 实现数组操作的方法
在 Vue 中操作数组时，需要遵循 Vue 的响应式规则，确保数组的变更能够触发视图更新。以下是几种常见的数组操作方法：
使用变异方法
Vue 对数组的变异方法进行了封装，这些方法会触发视图更新：
push()：向数组末尾添加元素pop()：删除数组最后一个元素shift()：删除数组第一个元素unshift()：向数组开头添加元素splice()：添加/删除数组中的元素sort()：对数组进行排序reverse()：反转数组顺序
// 示例：使用 push 方法
this.items.push(newItem)替换数组
非变异方法（如 filter、concat、slice）不会改变原数组，而是返回新数组。可以通过替换原数组来实现响应式更新：
// 示例：使用 filter 方法
this.items = this.items.filter(item => item.isActive)直接设置索引
直接通过索引设置数组项或修改数组长度不会触发响应式更新。可以使用 Vue.set 或 this.$set：
// 正确方式
this.$set(this.items, indexOfItem, newValue)注意事项
- 使用
Vue.set或this.$set可以确保新增的属性也是响应式的 - 对于大型数组，考虑使用计算属性或方法来处理数据
- 在 Vue 3 中，可以使用
reactive或ref来创建响应式数组
// Vue 3 示例
import { reactive } from 'vue'
const state = reactive({
items: []
})遵循这些方法可以确保数组操作在 Vue 中正确触发视图更新。
