Vue3中如何将Options API的数组相关代码转换为Composition API？

1. 补全响应式状态定义 #

原Options API里的originalList、futureList、originalIndex、futureIndex、movingItem、futureItem都是组件的响应式数据，在Composition API里需要显式定义为ref（值类型）或reactive（引用类型）。为了兼容原代码中动态通过字符串访问列表的逻辑，建议把所有拖拽相关的列表放到一个reactive对象里统一管理：

import { ref, reactive } from 'vue';

// 用reactive对象管理所有拖拽列表，方便通过字符串键访问
const lists = reactive({
  list1: [
    { name: ' abcd', id: 0, style: { background: 'gold' } },
    { name: ' Tahu', id: 1, style: { background: 'red', color: 'yellow' } },
    { name: ' Kopa', id: 2, style: { background: 'white' } },
    { name: ' Anak', id: 3, style: { background: 'black', color: 'yellow' } },
  ],
  // 如有第二个拖拽列表，比如list2，直接在这里追加定义
  // list2: [...]
});

// 拖拽过程中需要的状态变量，全部定义为ref
const originalList = ref('list1'); // 存储原始列表的键名（如'list1'）
const futureList = ref('list1');   // 存储目标列表的键名
const originalIndex = ref(0);      // 拖拽项的原始索引
const futureIndex = ref(0);        // 拖拽项的目标索引
const movingItem = ref(null);      // 被拖拽的项
const futureItem = ref(null);      // 目标位置的项

2. 转换handleDragEndItem函数 #

原代码中this[xxx]的动态访问逻辑，对应到我们定义的lists对象；所有this.xxx直接替换为对应的ref变量（注意值类型的ref要加.value）：

const handleDragEndItem = () => {
  // 对比原始列表和目标列表的键名
  if (originalList.value === futureList.value) {
    // 动态获取目标列表，通过键名从lists对象中取值
    const targetList = lists[futureList.value];
    // 赋值拖拽项和目标位置项
    movingItem.value = targetList[originalIndex.value];
    futureItem.value = targetList[futureIndex.value];

    if (movingItem.value && futureItem.value) {
      // 复制列表（避免直接修改原数组导致响应式异常）
      const _list = [...targetList];
      // 交换两项位置
      _list[futureIndex.value] = movingItem.value;
      _list[originalIndex.value] = futureItem.value;
      // 更新原列表（lists是reactive对象，直接赋值触发响应式更新）
      lists[futureList.value] = _list;
    }
  } else {
    // 跨列表拖拽逻辑，同样通过lists[originalList.value]、lists[futureList.value]访问对应列表
    // ... 你的跨列表处理代码
  }
};

关键转换点说明 #

• 原代码this[this.futureList]的动态列表访问逻辑，在Composition API里通过reactive包裹的lists对象实现，既保留原有逻辑，又符合Composition API的状态管理规范。
• 所有原组件实例上的响应式变量都要显式定义为ref，访问和修改时必须添加.value。
• 复制数组时用扩展运算符[...targetList]比Object.assign([], targetList)更简洁，效果完全一致。

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