在 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ù)用

父組件傳遞新對(duì)象的代理處理

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

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

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

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

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

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

• 父組件代碼示例

// 父組件每次生成新對(duì)象
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ù)用代理對(duì)象，導(dǎo)致 props.optionData 的引用地址在子組件中未變化，因此 watch 認(rèn)為未發(fā)生“頂層”變化，跳過(guò)深度檢查。

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

三、解決方案

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

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

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

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

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

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

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

在子組件中手動(dòng)比較新舊值的 序列化結(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 確保深度屬性變化的檢測(cè)。
• 若性能敏感，可通過(guò)唯一標(biāo)識(shí)或序列化優(yōu)化依賴鏈。

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

最新評(píng)論