Vue响应式数组操作需用push/splice/$set等变异方法，禁用索引赋值；推荐对象映射+id key管理；批量操作应合并提交；过滤用计算属性+防抖优化性能。

用响应式方式操作数组，避免直接赋值

Vue 无法检测直接通过索引设置数组项（如 this.items[0] = newItem）或直接修改数组长度（如 this.items.length = 0）。必须使用 Vue 提供的变异方法或 $set。

• 新增：优先用 push()、unshift()、splice()，它们是被 Vue 包装过的响应式方法
• 修改：单个元素更新用 this.$set(this.items, index, newValue)，确保视图同步
• 删除：用 splice(index, 1) 或 filter() 创建新数组（注意 filter 返回新数组，会触发整个列表重渲染，适合小数据量）
• 替换整个数组时，不要写 this.items = newArray 后再赋值，而是直接 this.items = newArray —— 这本身是响应式的，但需确保 newArray 是全新引用

按 ID 管理数据，减少索引依赖

基于索引的操作（如 v-for="(item, i) in items" :key="i"）在增删后容易错位、状态丢失。更稳妥的方式是用唯一标识（如 id）作为 key，并用对象映射代替纯数组管理。

• 把数据存为 items: { '1': {id: 1, name: 'a'}, '2': {...} }，配合 Object.values(items) 渲染
• 增：直接 this.items[newId] = newItem
• 删：用 delete this.items[id]（注意：delete 不是响应式，需配合 this.$delete(this.items, id)）
• 改：直接 this.$set(this.items, id, updatedItem) 或 this.items[id] = updatedItem（后者在 Vue 2 中不响应，Vue 3 + Composition API 下可响应）

批量操作合并，减少视图更新次数

连续多次修改同一数组，会触发多次 DOM 更新。可通过临时缓存 + 一次性提交优化。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 例如批量删除多个项：先收集待删 id 列表，再用一次 filter 或 forEach + delete 处理，而不是循环调用 splice
• 在 Vuex 或 Pinia 中，把多个变更封装进一个 mutation/action，避免中间态暴露给组件
• 使用 Vue.nextTick() 在操作完成后统一处理副作用（如滚动定位、焦点恢复）

结合计算属性与防抖做查询优化

前端查询（如搜索过滤）若实时响应大量数据，易造成卡顿。应避免在 v-for 中直接调用方法，改用计算属性缓存结果，并对输入加防抖。

立即学习“前端免费学习笔记（深入）”；

• 定义 computed: { filteredItems() { return this.items.filter(...); } }，利用 Vue 缓存机制
• 搜索框绑定 v-model 到 searchText，再在 computed 中过滤，而非每次 onInput 手动重算
• 如需高频率输入响应（如实时搜索），对 searchText 的变更加 lodash.debounce 节流，减少 filter 触发频次