快捷導(dǎo)航

Vue3中ref數(shù)組的監(jiān)聽(tīng)實(shí)現(xiàn)方式

更新時(shí)間：2025年10月28日 11:00:12 作者：BillKu

Vue3中監(jiān)聽(tīng)ref定義的數(shù)組,需根據(jù)監(jiān)聽(tīng)需求選擇合適的監(jiān)聽(tīng)方法,對(duì)于空數(shù)組,推薦使用深度監(jiān)聽(tīng)來(lái)捕捉數(shù)組內(nèi)部變化,同時(shí),確保修改數(shù)組的方式是響應(yīng)式的,以保證監(jiān)聽(tīng)器能正常工作,根據(jù)具體需求,可以選擇直接深度監(jiān)聽(tīng)、監(jiān)聽(tīng)數(shù)組長(zhǎng)度變化或提取屬性監(jiān)聽(tīng)等方案

監(jiān)聽(tīng)場(chǎng)景	推薦寫(xiě)法	說(shuō)明
數(shù)組被整體替換	watch(jjdData, (newVal) => { ... })	監(jiān)聽(tīng)整個(gè)數(shù)組的引用變化。
數(shù)組內(nèi)部變化（增刪元素）及元素自身變化	watch(jjdData, (newVal) => { ... }, { deep: true })	最常用。深度監(jiān)聽(tīng)，可響應(yīng)數(shù)組方法和元素屬性的變化。
僅監(jiān)聽(tīng)數(shù)組長(zhǎng)度的變化	watch(() => jjdData.value.length, (newLen) => { ... })	只關(guān)心元素?cái)?shù)量的增減，不關(guān)心具體內(nèi)容變化。
監(jiān)聽(tīng)數(shù)組中特定對(duì)象屬性的變化	watch(() => jjdData.value.map(item => item.someProperty), (newVals) => { ... })	例如，只關(guān)心每個(gè) JJD 對(duì)象的 id 或 name 屬性是否變化。

監(jiān)聽(tīng)器的詳細(xì)寫(xiě)法與注意事項(xiàng)

1.基本監(jiān)聽(tīng)與深度監(jiān)聽(tīng)

對(duì)于你的 jjdData，如果它最初是空數(shù)組，然后在組件掛載后被賦值（例如通過(guò)異步請(qǐng)求），你需要使用深度監(jiān)聽(tīng)來(lái)捕捉數(shù)組本身以及其內(nèi)部對(duì)象元素的變化。

import { watch } from 'vue';

// 深度監(jiān)聽(tīng)，可以響應(yīng)數(shù)組替換、數(shù)組方法調(diào)用以及對(duì)象元素屬性的變化
watch(
  jjdData,
  (newArray, oldArray) => {
    console.log('數(shù)組發(fā)生了變化', newArray);
    // 在這里執(zhí)行你的副作用邏輯
  },
  { deep: true } // 關(guān)鍵配置
);

注意：

當(dāng)監(jiān)聽(tīng) reactive 定義的響應(yīng)式數(shù)據(jù)時(shí)，會(huì)強(qiáng)制開(kāi)啟深度監(jiān)視，但對(duì)于 ref 定義的數(shù)組，需要顯式配置 deep: true。

使用 deep: true 時(shí)，oldArray 可能與 newArray 相同，因?yàn)樗鼈冎赶蛲粋€(gè)響應(yīng)式代理對(duì)象。

2.提取屬性進(jìn)行監(jiān)聽(tīng)

如果只想監(jiān)聽(tīng)數(shù)組內(nèi)對(duì)象某些特定屬性的集合變化，可以使用計(jì)算屬性提取后再監(jiān)聽(tīng)，這有助于減少不必要的回調(diào)。

import { watch, computed } from 'vue';

// 提取出所有需要監(jiān)聽(tīng)的屬性，組成一個(gè)新數(shù)組
const somePropertyList = computed(() => jjdData.value.map(item => item.someProperty));

watch(somePropertyList, (newValues, oldValues) => {
  // 比較 newValues 和 oldValues 來(lái)確定具體哪個(gè)索引的屬性發(fā)生了變化
  console.log('某個(gè)對(duì)象的someProperty發(fā)生了變化', newValues);
});
// 或者使用getter函數(shù)
watch(
  () => jjdData.value.map(item => item.someProperty),
  (newVals, oldVals) => { ... }
);

3.動(dòng)態(tài)管理監(jiān)聽(tīng)器（適用于大型動(dòng)態(tài)數(shù)組）

對(duì)于頻繁增刪元素的大型數(shù)組，如果需要為每個(gè)元素的特定屬性建立單獨(dú)的監(jiān)聽(tīng)器，可以考慮動(dòng)態(tài)管理監(jiān)聽(tīng)器，但通常復(fù)雜度較高。

import { watch, onScopeDispose } from 'vue';

const stops = new Map(); // 用來(lái)存儲(chǔ)每個(gè)監(jiān)聽(tīng)器的停止函數(shù)

// 監(jiān)聽(tīng)整個(gè)數(shù)組的變化，以管理針對(duì)每個(gè)元素的監(jiān)聽(tīng)器
watch(
  () => [...jjdData.value],
  (newArr, oldArr) => {
    // 邏輯：對(duì)比新老數(shù)組，為新增元素創(chuàng)建監(jiān)聽(tīng)器，為刪除的元素移除監(jiān)聽(tīng)器
    // ... (具體實(shí)現(xiàn)可參考搜索結(jié)果中的示例:cite[2])
  },
  { deep: true }
);

// 組件卸載時(shí)清理所有監(jiān)聽(tīng)器
onScopeDispose(() => {
  stops.forEach(stop => stop());
  stops.clear();
});

除非有非常精確的需求，否則更推薦使用前面提到的深度監(jiān)聽(tīng)或提取屬性監(jiān)聽(tīng)的方法。

確保響應(yīng)式變化的注意事項(xiàng)

為了讓監(jiān)聽(tīng)正常生效，你需要確保修改數(shù)組的方式是響應(yīng)式的：

變更數(shù)組本身：推薦使用數(shù)組的變更方法，如 push, pop, splice, shift, unshift 等，或者直接對(duì)整個(gè)數(shù)組進(jìn)行賦值（例如 jjdData.value = newArray）。
修改數(shù)組內(nèi)的對(duì)象元素：直接通過(guò)索引修改對(duì)象屬性（例如 jjdData.value[0].name = 'new value'）在Vue 3的響應(yīng)式系統(tǒng)下是可以被 deep: true 檢測(cè)到的。但更推薦的做法是創(chuàng)建一個(gè)新對(duì)象進(jìn)行替換，以保證變化的可追蹤性，例如 jjdData.value[0] = { ...jjdData.value[0], name: 'new value' }。

如何選擇監(jiān)聽(tīng)方案

對(duì)于大多數(shù)情況，直接使用 deep: true 進(jìn)行深度監(jiān)聽(tīng)是最簡(jiǎn)單直接的選擇。
如果只關(guān)心數(shù)組是否被整體替換，或者只關(guān)心數(shù)組長(zhǎng)度的變化，可以使用非深度監(jiān)聽(tīng)。
如果數(shù)組很大，或者只關(guān)心里面對(duì)象的某一個(gè)特定屬性，使用提取屬性并監(jiān)聽(tīng)的方式性能會(huì)更優(yōu)。
盡量避免在大型動(dòng)態(tài)數(shù)組上為每個(gè)元素單獨(dú)創(chuàng)建監(jiān)聽(tīng)器，除非確有必要，因?yàn)楣芾砥饋?lái)比較復(fù)雜。