Vue.js 3中点击按钮排序响应式数组后视图不更新的问题

问题根源 #

你用reactive创建的数组是Vue的代理对象，直接替换整个数组引用（比如list = [...list].sort(...)）会脱离响应式代理，导致视图无法感知变化。如果调用list.sort()仍未生效，大概率是误替换了数组引用，而非排序逻辑问题。

可行解决方案 #

方案1：原地排序（直接修改原数组） #

Array.sort()是原地修改数组的方法，Vue3的reactive会跟踪这类操作，直接调用就能触发视图更新：

// 点击按钮的排序方法
const sortList = () => {
  // 按age升序排序，原地修改原数组
  list.sort((a, b) => a.age - b.age);
};

注意：此方法会改变原数组的顺序，若需保留原数组，使用下面的方案。

方案2：生成新数组后替换原数组内容（不改变引用） #

先生成排序后的新数组，再用splice清空原数组并插入新元素——这是操作原代理数组的内容，不会丢失响应式，同时保留原数组副本：

const sortList = () => {
  // 生成排序后的新数组（不修改原数组）
  const sorted = [...list].sort((a, b) => a.age - b.age);
  // 清空原数组并插入所有新元素
  list.splice(0, list.length, ...sorted);
};

后续仍可对list执行正常增删操作（如list.push(...)），响应式不受影响。

方案3：改用ref定义数组（更直观的引用替换） #

若觉得reactive的数组操作受限，可换成ref定义数组，直接替换value属性即可触发响应式，同时不影响后续增删：

// 用ref替代reactive
let list = ref([
  {name: 'name', age:20},
  {name: 'name', age:21},
  {name: 'name', age:2},
]);

// 排序方法
const sortList = () => {
  list.value = [...list.value].sort((a, b) => a.age - b.age);
};

后续增删操作直接用list.value.push(...)即可，响应式正常触发。

关键注意点 #

• 禁止直接给reactive创建的数组重新赋值整个数组（如list = 新数组），这会丢失代理关系，导致响应式失效。
• 所有修改必须基于原代理数组的原地方法（sort/push/splice等），或通过splice替换内容，才能触发视图更新。

内容的提问来源于stack exchange，提问作者krackgen