Vue dep.notify() 含義及作用詳解

更新時(shí)間：2025年12月12日 12:05:18 作者：m0_47119963

dep.notify() 是Vue2響應(yīng)式系統(tǒng)中觸發(fā)依賴更新的核心方法,也是理解Vue2 視圖“自動(dòng)更新”的關(guān)鍵,本文給大家介紹Vue dep.notify() 含義及作用,感興趣的朋友跟隨小編一起看看吧

一、先搞懂：dep是什么？

dep 是 Dependency（依賴）的縮寫，是 Vue2 為每個(gè)響應(yīng)式屬性創(chuàng)建的「依賴管理器」。

每個(gè)響應(yīng)式屬性（比如 data 里的 user.name）都對(duì)應(yīng)一個(gè) Dep 實(shí)例；
Dep 內(nèi)部維護(hù)一個(gè)數(shù)組（subs），存放所有“依賴這個(gè)屬性”的 Watcher（更新函數(shù)）；
Dep 有兩個(gè)核心方法：
- depend()：收集依賴（把當(dāng)前 Watcher 加入 subs 數(shù)組）；
- notify()：通知所有依賴（遍歷 subs，執(zhí)行每個(gè) Watcher 的更新邏輯）。

二、dep.notify()的核心作用

當(dāng)響應(yīng)式屬性的值被修改（觸發(fā) setter）時(shí)，dep.notify() 會(huì)被調(diào)用，它的唯一目的是：
通知所有依賴該屬性的 Watcher 執(zhí)行更新（比如組件重新渲染、計(jì)算屬性重新計(jì)算、watch 回調(diào)執(zhí)行）。

三、完整工作流程（結(jié)合代碼理解）

我們把 defineReactive、Dep、Watcher、dep.notify() 串起來，看一次完整的“屬性修改 → 視圖更新”：

1. 定義 Dep 類（Vue2 源碼核心邏輯簡(jiǎn)化）

// 依賴管理器：收集Watcher，觸發(fā)更新
class Dep {
  constructor() {
    this.subs = []; // 存放所有依賴當(dāng)前屬性的Watcher
  }
  // 收集依賴：把當(dāng)前Watcher加入數(shù)組
  depend() {
    if (Dep.target) { // Dep.target 是當(dāng)前活躍的Watcher（比如組件渲染W(wǎng)atcher）
      this.subs.push(Dep.target);
    }
  }
  // 通知所有Watcher更新
  notify() {
    // 遍歷所有依賴的Watcher，執(zhí)行update方法
    this.subs.forEach(watcher => watcher.update());
  }
}
// Dep.target：全局變量，標(biāo)記當(dāng)前正在執(zhí)行的Watcher（渲染/計(jì)算/監(jiān)聽）
Dep.target = null;

2. 定義 Watcher 類（更新邏輯的載體）

Watcher 是“更新函數(shù)的封裝”，比如組件渲染函數(shù)、watch 回調(diào)都對(duì)應(yīng)一個(gè) Watcher：

class Watcher {
  constructor(vm, expr, callback) {
    this.vm = vm; // Vue實(shí)例
    this.expr = expr; // 監(jiān)聽的屬性（如 'user.name'）
    this.callback = callback; // 更新回調(diào)（比如重新渲染組件）
    this.value = this.get(); // 初始化：訪問屬性，觸發(fā)依賴收集
  }
  // 訪問屬性，觸發(fā)getter，收集依賴
  get() {
    Dep.target = this; // 標(biāo)記當(dāng)前Watcher為活躍狀態(tài)
    const value = this.vm[this.expr]; // 訪問屬性，觸發(fā)getter → dep.depend()
    Dep.target = null; // 重置
    return value;
  }
  // 執(zhí)行更新（由dep.notify()調(diào)用）
  update() {
    const newVal = this.vm[this.expr]; // 獲取新值
    this.callback(newVal); // 執(zhí)行回調(diào)（比如重新渲染組件）
  }
}

3. 結(jié)合響應(yīng)式屬性的 get/set

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每個(gè)屬性對(duì)應(yīng)一個(gè)Dep
  observe(val); // 遞歸處理嵌套對(duì)象
  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集依賴：把當(dāng)前Watcher加入dep.subs
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      observe(newVal); // 新值是對(duì)象則遞歸監(jiān)聽
      dep.notify(); // ?? 關(guān)鍵：屬性修改，通知所有Watcher更新
    }
  });
}

4. 實(shí)際場(chǎng)景演示

// 模擬Vue實(shí)例
const vm = {
  data: { user: { name: '張三' } }
};
// 把data變成響應(yīng)式
observe(vm.data);
// 創(chuàng)建Watcher：監(jiān)聽user.name，回調(diào)是打印新值（模擬組件渲染）
new Watcher(vm.data, 'user.name', (newVal) => {
  console.log('視圖更新：name變?yōu)?, newVal);
});
// 第一步：訪問屬性 → 觸發(fā)getter → 收集依賴
console.log(vm.data.user.name); // 輸出"張三"，此時(shí)Dep.subs已存入這個(gè)Watcher
// 第二步：修改屬性 → 觸發(fā)setter → dep.notify()
vm.data.user.name = '李四'; 
// ?? dep.notify()執(zhí)行 → 遍歷subs → 調(diào)用Watcher.update() → 打印"視圖更新：name變?yōu)?李四"

四、dep.notify()在 Vue 中的實(shí)際表現(xiàn)

在真實(shí)的 Vue2 項(xiàng)目中，你看不到 dep.notify() 的直接調(diào)用，但它是以下場(chǎng)景的“幕后推手”：

new Vue({
  data() {
    return { msg: 'hello' };
  },
  template: `<div>{{ msg }}</div>`
});
// 當(dāng)你修改 msg 時(shí)：
this.msg = 'world'; 
// 觸發(fā) msg 的 setter → dep.notify() → 通知組件渲染W(wǎng)atcher → 組件重新渲染 → 頁面顯示 'world'

五、補(bǔ)充：Vue3 中的對(duì)應(yīng)邏輯

Vue3 拋棄了 Dep 類，用 track（收集依賴）和 trigger（觸發(fā)更新）替代：

dep.depend() → track(target, key)：收集依賴到 targetMap（全局依賴映射表）；
dep.notify() → trigger(target, key)：從 targetMap 中取出所有依賴，執(zhí)行更新；
核心邏輯和 dep.notify() 一致，只是實(shí)現(xiàn)更模塊化、更高效。

總結(jié)

dep.notify() 的本質(zhì)是：響應(yīng)式屬性值變更后，通知所有依賴該屬性的更新邏輯（Watcher）執(zhí)行，最終實(shí)現(xiàn)視圖/數(shù)據(jù)的自動(dòng)更新。
它是 Vue2 響應(yīng)式系統(tǒng)的“觸發(fā)器”，也是連接「屬性修改」和「視圖更新」的核心橋梁。

到此這篇關(guān)于Vue dep.notify() 含義及作用詳解的文章就介紹到這了,更多相關(guān)Vue dep.notify()是什么內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: