1. 從零實現(xiàn)一個簡易Vue框架開篇以開發(fā)者視角直接切入核心問題 最近在技術(shù)社區(qū)看到不少關(guān)于手寫Vue的挑戰(zhàn)這讓我想起剛接觸前端框架時的困惑。為什么簡單的模板語法背后能實現(xiàn)數(shù)據(jù)響應(yīng)式更新今天我們就用最直白的方式拆解Vue的核心機(jī)制我會用200行左右的代碼實現(xiàn)一個具備數(shù)據(jù)綁定、指令解析功能的迷你框架。適合已經(jīng)了解Vue基礎(chǔ)用法想深入原理的前端開發(fā)者參考。2. 核心架構(gòu)設(shè)計思路2.1 響應(yīng)式系統(tǒng)實現(xiàn)原理Vue最核心的特性就是數(shù)據(jù)變化自動更新視圖。我們通過Object.defineProperty實現(xiàn)數(shù)據(jù)劫持function defineReactive(obj, key) { let value obj[key] const dep new Dep() // 依賴收集器 Object.defineProperty(obj, key, { get() { if (Dep.target) { dep.addSub(Dep.target) // 收集當(dāng)前依賴 } return value }, set(newVal) { if (newVal value) return value newVal dep.notify() // 觸發(fā)更新 } }) }關(guān)鍵點每個屬性都有獨立的Dep實例setter觸發(fā)時會通知所有關(guān)聯(lián)的Watcher更新2.2 虛擬DOM與patch算法為高效更新DOM我們需要實現(xiàn)簡單的虛擬DOM比對function patch(oldVnode, vnode) { // 簡單實現(xiàn)直接替換不同類型節(jié)點 if (oldVnode.tag ! vnode.tag) { return oldVnode.el.parentNode.replaceChild( createElm(vnode), oldVnode.el ) } // 更新屬性 const el (vnode.el oldVnode.el) updateProps(el, vnode.props) // 遞歸更新子節(jié)點 patchChildren(el, oldVnode.children, vnode.children) }3. 完整實現(xiàn)步驟3.1 初始化框架結(jié)構(gòu)創(chuàng)建主要類結(jié)構(gòu)class MiniVue { constructor(options) { this.$options options this._data options.data observe(this._data) // 數(shù)據(jù)響應(yīng)化 new Compile(options.el, this) // 編譯模板 } } class Watcher { constructor(vm, expOrFn, cb) { this.vm vm this.getter parsePath(expOrFn) this.cb cb this.value this.get() } get() { Dep.target this const value this.getter.call(this.vm, this.vm) Dep.target null return value } update() { const oldValue this.value this.value this.get() this.cb.call(this.vm, this.value, oldValue) } }3.2 模板編譯實現(xiàn)實現(xiàn)簡單的指令解析class Compile { constructor(el, vm) { this.$vm vm this.$el document.querySelector(el) if (this.$el) { this.compile(this.$el) } } compile(node) { const childNodes node.childNodes Array.from(childNodes).forEach(node { if (this.isElement(node)) { this.compileElement(node) } else if (this.isInterpolation(node)) { this.compileText(node) } if (node.childNodes node.childNodes.length 0) { this.compile(node) } }) } // 處理插值表達(dá)式 compileText(node) { const exp RegExp.$1 this.update(node, exp, text) } // 更新函數(shù) update(node, exp, dir) { const updater this[dir Updater] updater updater(node, this.$vm[exp]) new Watcher(this.$vm, exp, value { updater updater(node, value) }) } }4. 關(guān)鍵問題與優(yōu)化方案4.1 數(shù)組響應(yīng)式處理Object.defineProperty無法檢測數(shù)組變化需要特殊處理const arrayProto Array.prototype const arrayMethods Object.create(arrayProto) ;[push, pop, shift, unshift].forEach(method { const original arrayProto[method] Object.defineProperty(arrayMethods, method, { value: function(...args) { const result original.apply(this, args) const ob this.__ob__ ob.dep.notify() // 手動觸發(fā)更新 return result } }) })4.2 性能優(yōu)化實踐避免頻繁更新實現(xiàn)異步更新隊列l(wèi)et queue [] let waiting false function queueWatcher(watcher) { if (!queue.includes(watcher)) { queue.push(watcher) } if (!waiting) { waiting true nextTick(flushQueue) } } function flushQueue() { queue.forEach(watcher watcher.run()) queue [] waiting false }事件代理優(yōu)化在父元素上統(tǒng)一處理事件5. 完整示例與測試實現(xiàn)基礎(chǔ)功能后可以這樣使用div idapp p{{ counter }}/p button clickincrement1/button /div script new MiniVue({ el: #app, data: { counter: 0 }, methods: { increment() { this.counter } } }) /script6. 深度擴(kuò)展方向組件系統(tǒng)實現(xiàn)創(chuàng)建組件構(gòu)造函數(shù)實現(xiàn)props傳遞機(jī)制設(shè)計插槽(slot)系統(tǒng)生命周期鉤子function callHook(vm, hook) { const handlers vm.$options[hook] handlers handlers.call(vm) }自定義指令支持function compileDirective(el, dir, exp, vm) { const def vm.$options.directives[dir] if (def def.bind) { def.bind(el, vm, exp) } }在實現(xiàn)過程中發(fā)現(xiàn)虛擬DOM的diff算法實際上比想象中復(fù)雜得多。對于列表渲染的key優(yōu)化需要特別注意移動節(jié)點的處理邏輯。建議先實現(xiàn)簡單場景再逐步擴(kuò)展功能邊界。