Vue3 动态ref问题及解决

<template>
  <div>
    <a-card v-for="item in dragList" :key="item.id">
      <!-- 动态ref的使用 -->
      <data-list 
        :ref="el => { dataListRef[item.id] = el }" 
        :doc-id="item.id"
        :open-type="item.openType"
      />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const dragList = ref<any[]>([]);
const dataListRef = ref<Record<string, any>>({});

// 删除卡片方法
function remove(index: number) {
  const current = dragList.value[index];

  // 处理编辑状态
  if (current.openType === OPEN_WRITE) {
    const docIds = [current.id];
    closeDocEntry(docIds);
  }

  // 从列表中移除
  dragList.value.splice(index, 1);

  // 更新其他项目的源列表
  for (let ele of dragList.value) {
    const oldSourceList = ele.sourceList;
    ele.sourceList = oldSourceList.filter((item: any) => item.sourceId !== current.id);
  }

  // Vue 会自动处理动态 ref 的清理，无需手动删除，即使执行了删除方法，也不会删除key
  // dataListRef.value[current.id] 会自动变为 null
}

// 刷新所有数据列表
function reflushAllDragList() {
  Object.keys(dataListRef.value).forEach((key: string) => {
    // 过滤掉已经被删除的组件（值为null的情况）
    if (dataListRef.value[key]) {
      dataListRef.value[key].refresh();
    }
  });
}
</script>

function reflushAllDragList() {
  Object.keys(dataListRef.value).forEach((key: string) => {
    // 过滤掉已经被删除的组件（值为null的情况）
    // 当删除card时，Vue会自动把dataListRef的对应key的值设置为null
    // 不用进行手动删除，即使手动删除，key也存在
    if (dataListRef.value[key]) {
      dataListRef.value[key].refresh();
    }
  });
}