根據這張圖進行總結

在組件實例初始化階段，通過 observe() 方法對 data 對象進行遞歸遍歷。在這個過程中，Vue 使用 Object.defineProperty() 為data 中的每個屬性定義 getter 和 setter 來攔截對象屬性的“讀取“操作和“寫入”操作。

Vue 的依賴追蹤是通過 Watcher 和 Dep 協同完成的。其中，每個響應式屬性背后都對應一個 Dep 對象，負責收集依賴（即 Watcher）并在數據變更時通知更新。

在組件掛載階段，Vue 會自動創建一個渲染 Watcher。該 Watcher 會執行組件的 render 函數，并在執行過程中讀取模板中所用到的響應式數據。這些數據的讀取會觸發它們的 getter，從而使當前正在運行的 Watcher（即渲染 Watcher）被 Dep 收集為依賴。

這個過程叫做 依賴收集（Dependency Collection）。大概的過程是：

• Watcher 在評估表達式（執行它所監聽的函數或訪問的數據）或渲染函數之前，把自身賦值給 Dep.target；
• 當訪問響應式屬性時，觸發其 getter；
• 在 getter 中調用 dep.depend()，把當前 Dep.target（Watcher）添加到依賴列表中；
• 當屬性變化時，setter 被觸發，Dep 會通過 dep.notify() 通知所有依賴該屬性的 Watcher 執行更新邏輯。

Vue 中的 Watcher 有三種類型：

1. 渲染 Watcher：用于渲染視圖；
2. 計算屬性 Watcher：用于計算屬性的緩存與依賴追蹤；
3. 偵聽器 Watcher：用于執行 watch 回調函數。

總結：

在 Vue 的響應式系統中，Observer 負責劫持數據，Dep 負責依賴管理，而 Watcher 是響應式更新的執行者。組件掛載時創建渲染 Watcher，讀取數據觸發 getter，完成依賴收集。數據變更時，依賴該數據的 Watcher 會被通知更新，從而驅動視圖響應式變化。

組件	關鍵詞	作用
Observer	劫持	將數據變成響應式
Dep	收集依賴	保存 Watcher 列表
Watcher	更新邏輯	數據變了就執行
Compile	模板解析	把模板變成 Watcher
View	自動更新	Watcher 通知它變化