一、什么是深度監(jiān)聽(tīng)？

在 Vue 中，深度監(jiān)聽(tīng)是指監(jiān)聽(tīng)一個(gè)對(duì)象或數(shù)組的嵌套屬性（深層結(jié)構(gòu)）的變化，而不僅僅是監(jiān)聽(tīng)頂層屬性的引用變化。Vue 的響應(yīng)式系統(tǒng)默認(rèn)只監(jiān)聽(tīng)對(duì)象的淺層屬性（即直接屬性），如果需要監(jiān)聽(tīng)對(duì)象內(nèi)部的嵌套屬性變化，就需要啟用 深度監(jiān)聽(tīng)。

二、實(shí)現(xiàn)深度監(jiān)聽(tīng)的方法

Vue 提供了 watch 選項(xiàng)（或 @watch 裝飾器）來(lái)監(jiān)聽(tīng)數(shù)據(jù)變化，通過(guò)設(shè)置 deep: true 可以實(shí)現(xiàn)深度監(jiān)聽(tīng)。以下是具體實(shí)現(xiàn)方式：

1. 使用 watch 選項(xiàng)

語(yǔ)法：

watch: {
  // 監(jiān)聽(tīng)的對(duì)象
  obj: {
    handler(newVal, oldVal) {
      console.log('obj 變化了:', newVal, oldVal);
    },
    deep: true // 開(kāi)啟深度監(jiān)聽(tīng)
  }
}

完整示例：

new Vue({
  el: '#app',
  data() {
    return {
      obj: {
        a: 1,
        b: {
          c: 2
        }
      }
    };
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        console.log('obj 更新:', newVal);
      },
      deep: true
    }
  },
  methods: {
    changeObj() {
      this.obj.b.c = 3; // 修改深層屬性
    }
  }
});

• • 效果：當(dāng) obj.b.c 變?yōu)?3 時(shí)，watch 的 handler 會(huì)被觸發(fā)，輸出新值。

• 說(shuō)明：

  • deep: true 會(huì)遞歸遍歷 obj 的所有嵌套屬性，確保任何深層變化都能觸發(fā)監(jiān)聽(tīng)。
  • handler 接收新值和舊值，但由于深層對(duì)象是引用類型，newVal 和 oldVal 可能是同一個(gè)對(duì)象（僅內(nèi)容不同）。

2. 使用 $watch 方法

• 語(yǔ)法：

this.$watch('obj', (newVal, oldVal) => {
  console.log('obj 變化:', newVal);
}, {
  deep: true
});

• 完整示例：

new Vue({
  el: '#app',
  data() {
    return {
      obj: {
        a: 1,
        b: { c: 2 }
      }
    };
  },
  mounted() {
    this.$watch('obj', (newVal, oldVal) => {
      console.log('obj 更新:', newVal);
    }, {
      deep: true
    });
  },
  methods: {
    changeObj() {
      this.obj.b.c = 3;
    }
  }
});

• 效果：與 watch 選項(xiàng)相同，監(jiān)聽(tīng)深層變化。

3. 監(jiān)聽(tīng)特定嵌套屬性（避免深度監(jiān)聽(tīng)）

• 原理：如果只關(guān)心某個(gè)深層屬性，可以直接監(jiān)聽(tīng)其路徑，無(wú)需 deep。
• 代碼：

watch: {
  'obj.b.c'(newVal, oldVal) {
    console.log('obj.b.c 變化:', newVal, oldVal);
  }
}

• 效果：僅當(dāng) obj.b.c 變化時(shí)觸發(fā)，不監(jiān)聽(tīng)其他屬性。
• 優(yōu)點(diǎn)：性能更高，避免不必要的遞歸監(jiān)聽(tīng)。

三、深度監(jiān)聽(tīng)的工作原理

• Vue 的響應(yīng)式系統(tǒng)基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）。
• 默認(rèn)情況下，只有對(duì)象頂層屬性被設(shè)置為響應(yīng)式，嵌套屬性的 setter/getter 需通過(guò) deep: true 遞歸綁定。
• 當(dāng) deep: true 啟用時(shí)，Vue 會(huì)遍歷對(duì)象的所有屬性，添加監(jiān)聽(tīng)器，確保深層變化可被檢測(cè)。

四、注意事項(xiàng)

• 性能開(kāi)銷：
  • deep: true 會(huì)遞歸監(jiān)聽(tīng)所有嵌套屬性，對(duì)象越大，性能開(kāi)銷越高。
  • 優(yōu)化建議：盡量監(jiān)聽(tīng)具體屬性（如 'obj.b.c'），或拆分?jǐn)?shù)據(jù)結(jié)構(gòu)。
• 新舊值問(wèn)題：
  • 深度監(jiān)聽(tīng)時(shí)，newVal 和 oldVal 是同一個(gè)引用，需深拷貝比較差異：

handler(newVal) {
  const oldVal = JSON.parse(JSON.stringify(newVal));
  // 比較邏輯
}

數(shù)組特殊情況：

• 數(shù)組的嵌套對(duì)象也支持深度監(jiān)聽(tīng)，但數(shù)組本身的push等方法已默認(rèn)響應(yīng)式，無(wú)需 deep。
• 示例：

watch: {
  'arr[0].a': {
    handler(newVal) {
      console.log('arr[0].a 變化:', newVal);
    },
    deep: true
  }
}

• Vue 3 差異：
  • Vue 3 使用 Proxy，深度監(jiān)聽(tīng)更高效，但用法一致。

五、實(shí)際應(yīng)用場(chǎng)景

• 表單數(shù)據(jù)：監(jiān)聽(tīng)復(fù)雜表單對(duì)象的變化，實(shí)時(shí)校驗(yàn)。

watch: {
  form: {
    handler(newVal) {
      this.validateForm(newVal);
    },
    deep: true
  }
}

• 狀態(tài)管理：監(jiān)聽(tīng)嵌套狀態(tài)（如 Vuex 的 state），觸發(fā)更新。
• 動(dòng)態(tài)配置：監(jiān)聽(tīng)配置對(duì)象的變化，調(diào)整 UI。

六、面試擴(kuò)展

如果面試官追問(wèn)，我可以補(bǔ)充：

替代方案：用 computed 計(jì)算屬性配合 watch

computed: {
  objComputed() {
    return JSON.stringify(this.obj); // 轉(zhuǎn)為字符串比較
  }
},
watch: {
  objComputed(newVal, oldVal) {
    console.log('obj 變化:', newVal);
  }
}

性能優(yōu)化：結(jié)合 immediate: true（初始觸發(fā)）或防抖（debounce）：

watch: {
  obj: {
    handler: _.debounce(function(newVal) {
      console.log('節(jié)流更新:', newVal);
    }, 300),
    deep: true
  }
}

七、總結(jié)

• 核心方法：watch 或 $watch 設(shè)置 deep: true。
• 推薦實(shí)踐：優(yōu)先監(jiān)聽(tīng)具體屬性，必要時(shí)用深度監(jiān)聽(tīng)并優(yōu)化性能。
• 代碼示例已覆蓋常見(jiàn)場(chǎng)景，面試中可根據(jù)需求調(diào)整。

到此這篇關(guān)于在Vue中實(shí)現(xiàn)深度監(jiān)聽(tīng)的示例代碼的文章就介紹到這了,更多相關(guān)Vue深度監(jiān)聽(tīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論