Vue3 Composition API：如何在函数内操作响应式items数组？

你遇到的核心问题是：函数内部的items = _.sortBy(...)只是重新赋值了局部变量，并没有修改原响应式数组。

具体原因：

• 你把响应式的items作为参数传入checkClicked函数，此时函数内部的items是局部变量，覆盖了外部的响应式引用
• _.sortBy返回新数组，你将其赋值给局部变量items，但这不会影响外部的响应式items，所以模板里的数组还是原顺序
• 另外用index作为v-for的:key，排序后数组索引和对应项的关系会混乱，可能导致DOM渲染异常，这个也需要修正

1. 移除函数参数中的items，直接使用外部响应式变量 #

<script setup>的变量属于闭包作用域，函数可以直接访问外部的items，不需要传参，避免局部变量覆盖。

2. 排序后更新原响应式数组 #

Vue的响应式数组需要通过替换数组或使用数组变更方法（如push/splice）触发更新。这里直接将排序后的新数组赋值给state.items（或通过items.value，因为toRefs返回的是Ref对象）。

3. 修正v-for的:key #

把:key="index"改成:key="item.id"，确保每个列表项的key唯一且稳定，避免排序后的DOM复用问题。

<template>
  <header><h1>HomeShop</h1></header>

  <main>
    <section>
      <Item-Card
        v-for="item in items"
        :key="item.id" <!-- 改用唯一id作为key -->
        :item="item.item"
        :check="item.check"
        @item-checked="checkClicked(item.id)" <!-- 不再传items和index -->
        @item-deleted="deleteClicked(item.id)"
      />

      <Add-New-Item @item-submited="newItemCard" />
    </section>
  </main>
    <button @click="$log(JSON.stringify(items, null, 1))">Log</button>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import axios from "axios";
import _ from "lodash";

const state = reactive({
  items: [],
});

const { items } = toRefs(state);

const checkClicked = (id) => {
  // 通过id查找元素，避免排序后索引失效
  const itemIndex = items.value.findIndex(item => item.id === id);
  if (itemIndex === -1) return;

  if (!items.value[itemIndex].check) {
    items.value[itemIndex].check = true;
    items.value[itemIndex].checkTime = _.now();
    // 排序后替换原响应式数组
    state.items = _.sortBy(items.value, ["check", "checkTime"]);
    console.log(JSON.stringify(state.items, null, 1));
    axios.patch(`http://localhost:3000/items/${id}`, { check: true });
  } else {
    items.value[itemIndex].check = false;
    delete items.value[itemIndex].checkTime;
    // 取消勾选后也重新排序（按需保留）
    state.items = _.sortBy(items.value, ["check", "checkTime"]);
    axios.patch(`http://localhost:3000/items/${id}`, { check: false });
  }
};
</script>

• 用findIndex通过id查找元素，而非依赖index参数，因为排序后数组索引会变化，原index会失效
• 直接修改state.items或items.value替换数组，Vue能检测到变化并更新模板
• 取消勾选后的排序逻辑可按需保留，如果不需要取消勾选后重排，可删除对应代码

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