一、Vue 核心架構設計

1.1 整體架構流程圖

1.2 模塊職責劃分

模塊	源碼文件	核心職責
響應式系統	src/core/observer	數據劫持/依賴管理
虛擬DOM	src/core/vdom	VNode創建/Diff/Patch
編譯器	src/compiler	模板轉渲染函數
組件系統	src/core/instance	組件實例生命周期管理

---

二、響應式系統源碼解析

2.1 核心類關系圖

2.2 核心源碼分析

2.2.1 數據劫持實現

// src/core/observer/index.js
export class Observer {constructor(value) {this.value = valuethis.dep = new Dep()def(value, '__ob__', this)if (Array.isArray(value)) {this.observeArray(value)} else {this.walk(value)}}walk(obj) {const keys = Object.keys(obj)for (let i = 0; i < keys.length; i++) {defineReactive(obj, keys[i])}}
}function defineReactive(obj, key) {const dep = new Dep()let val = obj[key]Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter() {if (Dep.target) {dep.depend() // 依賴收集}return val},set: function reactiveSetter(newVal) {if (newVal === val) returnval = newValdep.notify() // 觸發更新}})
}

2.2.2 依賴收集過程

// src/core/observer/dep.js
let uid = 0
export default class Dep {static target = nullconstructor() {this.id = uid++this.subs = []}depend() {if (Dep.target) {Dep.target.addDep(this)}}notify() {const subs = this.subs.slice()for (let i = 0; i < subs.length; i++) {subs[i].update() // 通知Watcher更新}}
}

---

三、虛擬DOM與Diff算法實現

3.1 Diff算法流程圖

3.2 核心Diff源碼

// src/core/vdom/patch.js
function updateChildren(parentElm, oldCh, newCh) {let oldStartIdx = 0let newStartIdx = 0let oldEndIdx = oldCh.length - 1let newEndIdx = newCh.length - 1while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (sameVnode(oldStartVnode, newStartVnode)) {patchVnode(...)oldStartIdx++newStartIdx++} // ...其他四種情況處理}if (oldStartIdx > oldEndIdx) {addVnodes(...)} else if (newStartIdx > newEndIdx) {removeVnodes(...)}
}

---

四、模板編譯全流程剖析

4.1 編譯流程圖

4.2 編譯階段源碼

// src/compiler/index.js
export function compileToFunctions(template) {const ast = parse(template.trim()) // 生成ASToptimize(ast) // 靜態標記const code = generate(ast) // 生成代碼return {render: new Function(code.render),staticRenderFns: code.staticRenderFns.map(fn => new Function(fn))}
}// 生成的渲染函數示例
function render() {with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',[_v(_s(message))]),_c('button',{on:{"click":handleClick}},[_v("Click")])])}
}

---

五、組件系統與生命周期

5.1 組件初始化流程

5.2 生命周期源碼觸發點

// src/core/instance/init.js
Vue.prototype._init = function (options) {// ...initLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, 'beforeCreate')initInjections(vm)initState(vm)initProvide(vm)callHook(vm, 'created')if (vm.$options.el) {vm.$mount(vm.$options.el)}
}

---

六、異步更新隊列與性能優化

6.1 更新隊列流程圖

6.2 核心實現代碼

// src/core/observer/scheduler.js
const queue = []
let waiting = falsefunction flushSchedulerQueue() {queue.sort((a, b) => a.id - b.id) // 保證父組件先更新for (let i = 0; i < queue.length; i++) {const watcher = queue[i]watcher.run()}resetSchedulerState()
}export function queueWatcher(watcher) {if (!queue.includes(watcher)) {queue.push(watcher)}if (!waiting) {nextTick(flushSchedulerQueue)waiting = true}
}

---

七、Vue 3 新特性源碼對比

7.1 響應式系統升級

// Vue 3 使用Proxy實現
function reactive(target) {return new Proxy(target, {get(target, key, receiver) {track(target, key) // 依賴收集return Reflect.get(...arguments)},set(target, key, value, receiver) {Reflect.set(...arguments)trigger(target, key) // 觸發更新}})
}

7.2 編譯優化對比

優化點	Vue 2	Vue 3
靜態提升	無	標記靜態節點
補丁標志	全量Diff	動態節點追蹤
緩存事件	每次渲染重新創建	緩存事件處理函數

---

八、手寫迷你Vue框架實戰

8.1 核心實現代碼

class MyVue {constructor(options) {this.$options = optionsthis._data = options.data()new Observer(this._data)new Compiler(options.el, this)}
}class Observer {constructor(data) {this.walk(data)}walk(data) {Object.keys(data).forEach(key => {defineReactive(data, key, data[key])})}
}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 = newValdep.notify()}})
}

---

總結

本文從Vue源碼層面深入解析了響應式系統、虛擬DOM、模板編譯等核心模塊的實現原理。建議通過以下方式進一步學習：

1. 使用Vue官方調試版本進行斷點調試
2. 參與Vue源碼GitHub Issue討論
3. 對比不同版本實現差異