Vue 框架的設計和實現融合了多種經典設計模式，不同版本（Vue2/Vue3）在模式應用上略有差異，但核心模式的底層邏輯一致。以下是 Vue 中最核心、最常用的設計模式，結合應用場景和源碼層面的體現逐一説明：

一、核心設計模式（高頻）

1. 觀察者模式（Observer Pattern）+ 發佈-訂閲模式（Publish-Subscribe Pattern）

這是 Vue 響應式系統的核心基石，兩者常結合使用（注意：發佈-訂閲是觀察者模式的變種，Vue 中通過「Dep（訂閲器）+ Watcher（觀察者）」實現解耦）。

• 應用場景：數據響應式（數據變化自動更新視圖）。
• 實現邏輯：

• Vue2：通過 Object.defineProperty 劫持數據的 get/set，數據被讀取時（get），Watcher 訂閲到 Dep（依賴收集）；數據被修改時（set），Dep 通知所有 Watcher 執行更新（派發更新）。
• Vue3：改用 Proxy 代理整個對象，核心邏輯仍為「依賴收集 + 派發更新」，Dep 升級為 Effect 系統，本質還是觀察者模式。

• 核心代碼（Vue2 簡化版）：

// 訂閲器（Dep）- 管理觀察者
class Dep {
  constructor() {
    this.subs = []; // 存儲Watcher
  }
  addSub(watcher) { this.subs.push(watcher); }
  notify() { this.subs.forEach(watcher => watcher.update()); }
}
// 觀察者（Watcher）- 響應更新
class Watcher {
  update() { console.log("視圖更新"); }
}
// 響應式數據劫持
function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      Dep.target && dep.addSub(Dep.target); // 依賴收集
      return val;
    },
    set(newVal) {
      val = newVal;
      dep.notify(); // 派發更新
    }
  });
}

2. 組合模式（Composite Pattern）

「將對象組合成樹形結構，統一處理單個對象和組合對象」，Vue 中用於虛擬 DOM（VNode）樹 和 組件樹 的管理。

• 應用場景：

• VNode 樹：無論是元素節點、文本節點、組件節點，都被封裝為 VNode 對象，通過統一的 API（如 patch）處理渲染、更新，無需區分單個節點還是節點樹。
• 組件樹：父子組件嵌套形成的樹形結構，Vue 統一處理組件的生命週期、事件傳遞、數據透傳（如 provide/inject）。

• 核心特點：單個組件/VNode 和組件樹/VNode 樹的操作接口一致（如 $mount、render）。

3. 裝飾器模式（Decorator Pattern）

「在不修改原對象的前提下，動態擴展其功能」，Vue 中多處體現：

• 應用場景：

• Vue2 組件選項合併：mixins、extends 本質是對組件選項的裝飾擴展，不修改原組件，新增生命週期、方法等。
• Vue3 裝飾器語法：如 @Prop、@Watch（官方推薦的 vue-class-component 庫），通過裝飾器擴展組件類的功能。
• 指令（Directive）：如 v-model、v-show，在不修改 DOM 元素本身的前提下，為其添加交互/顯示邏輯。

4. 工廠模式（Factory Pattern）

「封裝對象的創建過程，根據不同條件返回不同實例」，Vue 中用於組件實例化 和 VNode 創建：

• 應用場景：

• 組件工廠：createComponent 方法根據組件選項（對象/函數/異步組件）創建不同類型的組件實例，屏蔽創建細節。
• VNode 工廠：createVNode（Vue3）/ createElement（Vue2）根據參數（標籤、組件、文本）創建不同類型的 VNode，對外暴露統一的創建接口。

• 核心代碼（簡化版）：

// Vue3 createVNode 工廠邏輯簡化
function createVNode(type, props, children) {
  if (typeof type === 'string') {
    return new ElementVNode(type, props, children); // 元素VNode
  } else if (isComponent(type)) {
    return new ComponentVNode(type, props, children); // 組件VNode
  } else {
    return new TextVNode(children); // 文本VNode
  }
}

5. 單例模式（Singleton Pattern）

「保證一個類只有一個實例，並提供全局訪問點」，Vue 中核心單例：

• 應用場景：

• Vue 實例（根實例）：new Vue({ el: '#app' }) 通常只創建一個根實例，管理整個應用的狀態和生命週期。
• Vue3 的 app 實例：createApp() 創建的 app 實例是單例，全局配置（如 app.config、app.use）僅作用於該實例。
• 內置 API 單例：如 Vue.prototype.$router（Vue Router 實例）、Vuex 的 store 實例，全局唯一。

二、其他常用模式

三、Vue2 vs Vue3 模式差異

• Vue2 更依賴「類」和原型鏈（如 Vue 構造函數、Watcher/Dep 類），模式體現更偏向傳統 OOP；
• Vue3 基於 Composition API 和函數式編程，模式更輕量化（如 Effect 替代 Watcher/Dep，但核心仍是觀察者模式），同時新增「容器/注入模式」（provide/inject 強化）。

總結

Vue 並非單一依賴某一種設計模式，而是以觀察者模式（響應式）為核心，結合組合模式（VNode/組件樹）、工廠模式（實例創建）、單例模式（全局實例）等，形成一套適配前端組件化、響應式開發的模式體系。理解這些模式，能更深入掌握 Vue 源碼設計和組件設計。