Vue3中用computed处理数组容易踩哪些坑？怎么用更顺手？

Vue3的computed处理数组，底层逻辑是啥？

要理解computed处理数组的逻辑,得先抓住“响应式依赖追踪”和“缓存”这两个核心。

computed本质是基于依赖缓存的计算属性——它会自动追踪“自己执行过程中用到的响应式数据”作为依赖，当这些依赖变化时，computed才会重新计算；若依赖不变，直接返回缓存结果。

举个实际例子感受下：

import { reactive, computed } from 'vue'
const state = reactive({
  todoList: [
    { id: 1, done: false, text: '买菜' },
    { id: 2, done: true, text: '做饭' }
  ]
})
const doneTodos = computed(() => {
  return state.todoList.filter(todo => todo.done)
})

这里 doneTodos 的依赖是 state.todoList，当 state.todoList 里的元素新增、删除，或者某个todo的 done 状态变化时（因为todo是响应式对象），doneTodos 会自动重新计算。

但要注意：只有依赖是“响应式数据”时，变化才会被追踪，如果computed里用了普通数组（非reactive/ref包装），修改这个数组不会触发computed更新——这也是很多人踩坑的起点。

computed返回数组，和methods里返回数组有啥区别？

最核心的差异是“缓存机制”，这直接决定了性能和适用场景。

• computed有缓存：只有依赖的响应式数据变化时，才会重新计算，比如上面的 doneTodos，如果连续3次在模板里渲染它，只要依赖没变化，computed只执行一次，后面直接拿缓存结果。
• methods每次调用都执行：如果把同样逻辑放到methods里：

  const getDoneTodos = () => {
    return state.todoList.filter(todo => todo.done)
  }

  每次模板渲染、事件触发等场景调用 getDoneTodos，函数都会重新执行，如果列表很大、计算逻辑复杂，频繁调用会拖慢页面。

所以场景选择很明确：根据响应式数据生成数组”的逻辑被频繁使用但依赖变化少，用computed更高效；如果逻辑只在特定事件（比如点击按钮）时执行，用methods更灵活。

为啥computed返回的数组有时候不更新？常见“不响应”坑有哪些？

这是新手最容易栽的地方,本质是没搞清楚“哪些操作能触发响应式更新”，常见坑主要分两类：

坑1：依赖的数组不是响应式的

比如直接用普通数组当依赖：

const rawList = [1, 2, 3] // 普通数组，非响应式
const state = reactive({
  filter: 2
})
const filtered = computed(() => {
  return rawList.filter(num => num > state.filter)
})

此时修改 rawList.push(4)，filtered 不会更新——因为 rawList 不是响应式数据，Vue无法追踪它的变化。

解决方法：用 reactive 或 ref 包装数组，让它变成响应式：

const list = ref([1, 2, 3]) // ref包装后，list.value是响应式数组
const state = reactive({ filter: 2 })
const filtered = computed(() => {
  return list.value.filter(num => num > state.filter)
})

list.value.push(4) 会触发 filtered 重新计算。

坑2：修改数组的方式没触发响应式

Vue3对数组的响应式支持已经很友好,但仍有特殊情况（比如直接修改数组长度、通过索引赋值）容易混淆。

举个例子,假设 list 是响应式数组：

const list = reactive([1, 2, 3])
// 情况1：直接改长度
list.length = 0 // 这种操作是响应式的！Vue3对reactive数组的length修改做了拦截，会触发更新
// 情况2：索引赋值
list[0] = 10 // 这种操作也是响应式的！Vue3对reactive数组的索引赋值做了拦截

那为啥还会有人遇到“修改了数组但computed没更新”？问题出在“依赖的数组是否真的被修改成了非响应式”。

const state = reactive({
  list: [1, 2, 3],
  filter: 2
})
const filtered = computed(() => {
  return state.list.filter(num => num > state.filter)
})
// 错误操作：直接替换整个数组为普通数组
state.list = [4, 5, 6] 

这里 state.list 原本是reactive数组，赋值为普通数组后，state.list 变成了普通数组！后续修改 state.list.push(7) 不会触发响应式，因为它已经不是响应式数组了。

正确做法：修改数组时，保持它是响应式的，比如用数组的变更方法（push/pop/splice等），或替换时用响应式包装：

// 正确替换：用reactive包装新数组（没必要，因为state本身是reactive，直接赋值响应式数据即可）
state.list = reactive([4, 5, 6]) 
// 更简单的方式：用数组变更方法
state.list.splice(0, state.list.length, 4, 5, 6) // 清空原数组并插入新元素，触发响应式

复杂场景下，computed数组怎么和多个响应式数据配合？

实际项目中,computed处理数组往往要结合多个响应式变量（过滤条件+排序规则+搜索关键词”），关键是确保所有依赖都被正确追踪。

举个电商场景的例子：购物车列表需要根据“是否全选”“价格区间”“搜索关键词”来过滤和排序，代码逻辑大概长这样：

const cartState = reactive({
  items: [
    { id: 1, name: '手机', price: 5999, selected: true },
    { id: 2, name: '耳机', price: 199, selected: false },
    { id: 3, name: '充电宝', price: 99, selected: true }
  ],
  isAllSelected: false, // 全选开关
  minPrice: 100, // 最低价格过滤
  searchKeyword: '' // 搜索关键词
})
const filteredItems = computed(() => {
  // 第一步：根据全选状态过滤
  let temp = cartState.isAllSelected 
    ? cartState.items 
    : cartState.items.filter(item => item.selected)
  // 第二步：价格区间过滤
  temp = temp.filter(item => item.price >= cartState.minPrice)
  // 第三步：搜索关键词过滤
  temp = temp.filter(item => item.name.includes(cartState.searchKeyword))
  return temp
})

这里 filteredItems 的依赖包括 cartState.items、isAllSelected、minPrice、searchKeyword。只要其中任意一个数据变化，filteredItems 就会重新计算，Vue的响应式系统会自动追踪这些依赖，不需要手动配置——这也是computed的强大之处。

处理大数组时，computed的性能怎么优化？

如果数组数据量极大（thousands 级别），频繁的filter、map、sort操作会很耗时，这时候要结合场景做优化：

技巧1：减少不必要的依赖追踪

如果某个变量不是响应式的（比如固定的配置项），别放到computed里当依赖。

const fixedConfig = { pageSize: 10 } // 非响应式
const state = reactive({ list: [...] })
// 坏例子：把fixedConfig放到computed里（虽然它不会变化，但Vue会检查）
const paginatedList = computed(() => {
  return state.list.slice(0, fixedConfig.pageSize)
})
// 好例子：提前提取非响应式数据，减少computed的依赖检查
const pageSize = fixedConfig.pageSize
const paginatedList = computed(() => {
  return state.list.slice(0, pageSize)
})

技巧2：拆分复杂计算逻辑

如果一个computed里要做“过滤+排序+分组”多个操作，可以拆成多个computed，利用缓存减少重复计算。

// 第一步：过滤
const filteredList = computed(() => {
  return state.list.filter(/* 过滤逻辑 */)
})
// 第二步：排序（依赖filteredList）
const sortedList = computed(() => {
  return [...filteredList.value].sort(/* 排序逻辑 */)
})
// 第三步：分组（依赖sortedList）
const groupedList = computed(() => {
  return groupBy(sortedList.value, /* 分组规则 */)
})

这样只有当 filteredList 变化时，sortedList 才会重新计算；只有 sortedList 变化时，groupedList 才会重新计算——比把所有逻辑塞到一个computed里更高效。

技巧3：结合watch做延迟计算

如果computed的依赖变化非常频繁（比如用户疯狂输入搜索关键词），可以用 watch 配合 debounce（防抖）来延迟计算，避免频繁触发computed更新。

const searchKeyword = ref('')
const debouncedKeyword = ref('')
// 用watch+防抖，延迟更新关键词
watch(searchKeyword, (newVal) => {
  debounce(() => {
    debouncedKeyword.value = newVal
  }, 300)()
})
// computed依赖debouncedKeyword（变化频率降低）
const filteredList = computed(() => {
  return state.list.filter(item => item.name.includes(debouncedKeyword.value))
})

能不能在computed里修改原数组？为啥？

绝对不能！ computed是“计算属性”，设计上要满足纯函数特性：只根据依赖计算结果，不能有副作用（比如修改响应式数据、发请求、操作DOM等）。

如果在computed里修改原数组,会导致循环更新：

const state = reactive({ list: [1,2,3] })
const badComputed = computed(() => {
  state.list.push(4) // 副作用：修改了响应式数组
  return state.list
})

Vue会直接报错（类似“Maximum recursive updates exceeded”），因为修改 state.list 会触发computed重新计算，重新计算又会修改 state.list，最终陷入无限循环。

如果需要“根据计算结果修改数据”，应该用 watch 或者事件回调来处理。

用好computed处理数组的关键思路

1. 确保依赖是响应式的：用reactive/ref包装数组，避免用普通数组当依赖；
2. 理解缓存机制：区分computed和methods的适用场景，减少不必要的性能消耗；
3. 避坑响应式修改：用数组变更方法（push/splice等）或正确的响应式赋值方式，确保修改能被追踪；
4. 复杂场景拆分逻辑：大数组、多依赖时，拆分computed或结合watch优化性能；
5. 坚守纯函数原则：computed里只做计算，不搞副作用。

掌握这些点,处理Vue3的computed数组就会更顺手，少踩坑～