在 Vue 的響應(yīng)式系統(tǒng)中，直接監(jiān)聽 props.optionData 并啟用 deep: true 仍失效的原因，主要與 響應(yīng)式代理的復(fù)用機(jī)制 和 深度監(jiān)聽的實(shí)現(xiàn)邏輯 有關(guān)。

以下是具體分析：

一、核心原因：響應(yīng)式代理的復(fù)用

父組件傳遞新對象的代理處理

父組件通過 computed 生成的 optionData 每次都是新對象，但 Vue 在子組件中接收 props.optionData 時會自動將其轉(zhuǎn)換為 響應(yīng)式代理對象（Proxy）。

若父組件傳遞的新對象與原代理對象的 結(jié)構(gòu)相同，Vue 可能會 復(fù)用已有的代理實(shí)例，導(dǎo)致引用地址未發(fā)生明顯變化。

此時，直接監(jiān)聽 props.optionData 實(shí)際監(jiān)聽的是代理對象的引用地址，而非父組件原始對象的地址。

• deep: true 的局限性
• deep: true 的作用是遞歸監(jiān)聽對象 所有層級的屬性變化，但前提是 代理對象本身的引用地址已被正確追蹤 。

若代理對象的引用地址未變（被復(fù)用），即使內(nèi)部屬性發(fā)生變化，Vue 也會認(rèn)為 props.optionData 未發(fā)生“頂層”變化，從而跳過深度遍歷。

二、實(shí)驗(yàn)驗(yàn)證與現(xiàn)象解釋

• 父組件代碼示例

// 父組件每次生成新對象
const optionData = computed(() => ({
  title: 'Weekly Sales',
  xAxis: { data: categories.value },
  series: [{ data: values.value }]
}));

• 子組件監(jiān)聽邏輯

// 直接監(jiān)聽 props.optionData（失效）
watch(
  props.optionData,
  (newVal) => {
    console.log('觸發(fā)監(jiān)聽');
  },
  { deep: true } // 仍不觸發(fā)
);

• 現(xiàn)象解釋

引用地址未變：Vue 復(fù)用代理對象，導(dǎo)致 props.optionData 的引用地址在子組件中未變化，因此 watch 認(rèn)為未發(fā)生“頂層”變化，跳過深度檢查。

依賴收集失?。?code>deep: true 需要訪問對象的所有屬性以建立依賴關(guān)系，但若代理對象未觸發(fā)屬性訪問（如未實(shí)際使用嵌套屬性），依賴鏈可能不完整。

三、解決方案

• 改用函數(shù)形式監(jiān)聽

通過 函數(shù)返回 props.optionData，強(qiáng)制 Vue 在每次依賴收集時重新獲取原始值，繞過代理復(fù)用機(jī)制：

watch(
  () => props.optionData, // 動態(tài)獲取最新值
  (newVal) => {
    console.log('觸發(fā)監(jiān)聽');
  },
  { deep: true }
);

• 強(qiáng)制生成唯一標(biāo)識

在父組件中為對象添加 唯一鍵（如時間戳），確保每次生成的新對象結(jié)構(gòu)不同，避免代理復(fù)用：

const optionData = computed(() => ({
  ...config,
  _key: Date.now() // 破壞結(jié)構(gòu)一致性
}));

• 顯式觸發(fā)引用變化

在子組件中手動比較新舊值的 序列化結(jié)果，強(qiáng)制觸發(fā)更新：

watch(
  () => JSON.stringify(props.optionData),
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      console.log('觸發(fā)監(jiān)聽');
    }
  }
);

總結(jié)

推薦方案：

• 優(yōu)先使用函數(shù)形式監(jiān)聽，并結(jié)合 deep: true 確保深度屬性變化的檢測。
• 若性能敏感，可通過唯一標(biāo)識或序列化優(yōu)化依賴鏈。

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論