Vue3 動(dòng)態(tài)ref問(wèn)題及解決

更新時(shí)間：2025年07月23日 15:32:09 作者：linab112

Vue3動(dòng)態(tài)ref在組件卸載后保留key,值置為null,需手動(dòng)檢查null以避免錯(cuò)誤,不可刪除key,此為設(shè)計(jì)行為,旨在維護(hù)響應(yīng)式結(jié)構(gòu)完整性及性能優(yōu)化

1.問(wèn)題描述

在Vue 3項(xiàng)目中，當(dāng)使用動(dòng)態(tài)ref來(lái)引用組件時(shí)，刪除組件后發(fā)現(xiàn)ref對(duì)象中對(duì)應(yīng)的key仍然存在，只是值變?yōu)閌null`，而不是完全刪除該key。

在一個(gè)可拖拽的卡片列表組件中：

使用動(dòng)態(tài)ref來(lái)引用每個(gè)卡片中的數(shù)據(jù)列表組件
當(dāng)刪除卡片時(shí)，需要同時(shí)清理對(duì)應(yīng)的ref引用
發(fā)現(xiàn)刪除后ref對(duì)象中key仍存在，值為`null`

2.示例代碼

<template>
  <div>
    <a-card v-for="item in dragList" :key="item.id">
      <!-- 動(dòng)態(tài)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];

  // 處理編輯狀態(tài)
  if (current.openType === OPEN_WRITE) {
    const docIds = [current.id];
    closeDocEntry(docIds);
  }

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

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

  // Vue 會(huì)自動(dòng)處理動(dòng)態(tài) ref 的清理，無(wú)需手動(dòng)刪除，即使執(zhí)行了刪除方法，也不會(huì)刪除key
  // dataListRef.value[current.id] 會(huì)自動(dòng)變?yōu)?null
}

// 刷新所有數(shù)據(jù)列表
function reflushAllDragList() {
  Object.keys(dataListRef.value).forEach((key: string) => {
    // 過(guò)濾掉已經(jīng)被刪除的組件（值為null的情況）
    if (dataListRef.value[key]) {
      dataListRef.value[key].refresh();
    }
  });
}
</script>

說(shuō)明：

①可以使用數(shù)組或者對(duì)象存儲(chǔ)組件的ref對(duì)象實(shí)例，因?yàn)榻M件是循環(huán)生成的，所以每個(gè)組件的ref對(duì)象需要通過(guò)這種方式進(jìn)行存儲(chǔ)。

② 循環(huán)生成的多個(gè)組件可以通過(guò)點(diǎn)擊刪除按鈕進(jìn)行刪除，當(dāng)組件刪除時(shí)原本想刪除ref對(duì)象中的組件對(duì)應(yīng)的ref對(duì)象，但發(fā)現(xiàn)無(wú)法刪除，最后的結(jié)果是key存在，value為null

3.原因分析

Vue 3中的動(dòng)態(tài)ref機(jī)制有以下特點(diǎn)：

組件掛載時(shí)：動(dòng)態(tài)ref會(huì)自動(dòng)將組件實(shí)例賦值給指定的key
組件卸載時(shí)：Vue會(huì)自動(dòng)將對(duì)應(yīng)的ref值設(shè)置為`null`，但**不會(huì)刪除key**
響應(yīng)式處理：Vue的響應(yīng)式系統(tǒng)會(huì)在組件生命周期中自動(dòng)管理ref的狀態(tài)

為什么key不會(huì)被刪除

這是Vue 3的設(shè)計(jì)行為，不是bug：

Vue需要保持ref對(duì)象的響應(yīng)式結(jié)構(gòu)完整性
避免在組件頻繁掛載/卸載時(shí)產(chǎn)生不必要的響應(yīng)式觸發(fā)
提供了更好的性能優(yōu)化

4.解決方案

因?yàn)闊o(wú)法刪除，所以在后續(xù)使用ref對(duì)象時(shí)，需要進(jìn)行判斷是否為null，如果不為null，則執(zhí)行相關(guān)方法。

function reflushAllDragList() {
  Object.keys(dataListRef.value).forEach((key: string) => {
    // 過(guò)濾掉已經(jīng)被刪除的組件（值為null的情況）
    // 當(dāng)刪除card時(shí)，Vue會(huì)自動(dòng)把dataListRef的對(duì)應(yīng)key的值設(shè)置為null
    // 不用進(jìn)行手動(dòng)刪除，即使手動(dòng)刪除，key也存在
    if (dataListRef.value[key]) {
      dataListRef.value[key].refresh();
    }
  });
}