前言
面試的時候問起vue的原理恤批，大部分的人都會說通過Object.defineProperty修改屬性的get, set方法，從而達到數(shù)據(jù)改變的目的昔穴。然而作為vue的MVVM驅(qū)動核心，從數(shù)據(jù)的改變到視圖的改變，遠遠不止這句話就能解釋鸭巴，而是通過Observer, Dep, Watcher, Compile 4個類以及一個CpompileUtil輔助類完成，本文將以深入淺出的方式拦盹，分析從初始化DOM和data到數(shù)據(jù)的渲染鹃祖，MVVM背后究竟發(fā)生了什么
本文代碼翻譯于文章
掘金——看完這篇關(guān)于MVVM的文章，面試通過率提升了80%
源碼
本文源碼 github 歡迎star
思維導圖
開始
構(gòu)建一個MVVM實例
首先構(gòu)建一個DOM以及一個數(shù)據(jù)源data普舆，通過這兩個屬性恬口，構(gòu)建一個vm實例，接著構(gòu)建一個Observer對象
constructor (options) {
this.$el = options.el
this.$data = options.data
if (this.$el) {
let _
_ = new Observer(this.$data)
this.proxyData(this.$data)
_ = new Compile(this.$el, this)
}
}
Observer
constructor (data) {
this.observe(data)
}
Observer的構(gòu)造方法中將會調(diào)用observe方法遍歷檢測每一個屬性奔害，如果該屬性不是對象則返回楷兽，否則調(diào)用defineReactive方法攔截每一個屬性的get, set方法，defineReactTive也會成一個依賴收集器Dep
Dep
class Dep {
static target: Watcher
private subs: Watcher[] = []
public addSub (sub: Watcher) {
this.subs.push(sub)
}
public notify () {
this.subs.forEach(watcher => watcher.update())
}
}
這個依賴收集器的代碼比較簡單华临，內(nèi)置一個Watcher數(shù)組芯杀，當defineReactive修改屬性的get方法時，根據(jù)Dep.target是否存在將Wathcher加入到Dep的數(shù)組中雅潭，每次屬性改變set時揭厚，調(diào)用這個屬性的Dep.notify方法通知訂閱該屬性的Watcher修改自己的狀態(tài)
Compile(在Vue中，這個步驟是交給virtualDOM完成的扶供，這里只是簡單的實現(xiàn)一個文本節(jié)點的編譯)
完成數(shù)據(jù)項的響應(yīng)適配后(defineReactive, 生成Dep兩個步驟),接著開始編譯綁定的el節(jié)點
constructor (el: any, vm: MVVM) {
this.el = this.isElementNode(el) ? el : document.querySelector(el)
this.vm = vm
if (this.el) {
const fragment = this.node2fragment(this.el)
this.compile(fragment)
this.el.appendChild(fragment)
}
}
首先很重要的一步筛圆，將el的childNodes創(chuàng)建為一個fragment，這樣接下來就能夠在內(nèi)存中對DOM結(jié)構(gòu)進行操作椿浓，避免頻繁的訪問真實DOM帶來性能的開銷問題太援。
根據(jù)fragment進行編譯
根據(jù)每一個childNode進行判斷其類型
如果childNode是一個Element的元素，則獲取其attributes屬性扳碍，判斷其中有無相應(yīng)的指令v-xx等提岔，根據(jù)其指令在CompileUtil中找到方法，然后添加到Dep中笋敞。繼續(xù)遞歸調(diào)用compile方法碱蒙，直到最終的node類型為text為止
如果childNode是一個text類型的Node，在調(diào)用compileText方法
compileText
獲取該節(jié)點的textContent屬性，其中的值就是expr表達式赛惩，接著調(diào)用CompileUtil中的方法對整個expr進行操作
CompileUtil
找到CompileUtil的對應(yīng)的updateFn方法哀墓，利用數(shù)組的reduce拆解expr并獲取屬性，這里設(shè)計的很巧妙
static setVal (vm: MVVM, expr, value) {
expr = expr.split('.')
return expr.reduce((prev, next, currentIndex) => {
if (currentIndex === expr.length - 1) {
return prev[next] = value
}
return prev[next]
}, vm.$data)
}
// 已school.profession為例喷兼，調(diào)用這個方法將會拆解為
// ['school', 'profession']
// vm.$data.school
// vm.$data.school.profession
在進行編譯的時候篮绰，有兩次獲取到對應(yīng)的vm.$data中的屬性。第一次是為了在初次構(gòu)建的時候獲取值進行DOM的渲染褒搔，此時Dep.target為null阶牍，第二次是為了將updateFn添加到屬性的Dep中。這里便解釋了為什么進行Dep添加時為什么要判斷是否存在Dep.target對象星瘾。因為初始化的時候走孽，并不需要進行依賴收集
數(shù)據(jù)發(fā)生改變
當data中的某一項數(shù)據(jù)發(fā)生改變時，將調(diào)用這個屬性的Dep的notify方法琳状，通知訂閱了該屬性的Watcher調(diào)用自身的update方法改變DOM
總結(jié)
- vue就是通過以上的幾個類實現(xiàn)了完整的MVVM模式磕瓷，不同的是vue擁有更加完整的CpmpileUtil方法，針對每一個指令以及一些綁定添加特殊的updateFn方法念逞。vue也使用了virtualDOM統(tǒng)一管理了對于DOM的操作
- 縱觀這個MVVM的實現(xiàn)困食，發(fā)現(xiàn)其核心思想還是訂閱發(fā)布模式，每一個屬性都有一個依賴收集器翎承，每個使用到這個屬性的DOM或者衍生屬性都會向依賴收集注冊一個自身的方法硕盹，當屬性發(fā)生改變時，Dep將通知他們執(zhí)行自身的方法叨咖，這里也是一個高度解耦的設(shè)計瘩例。而這種基于事件改變的訂閱發(fā)布模式，也是整個JS無論前端后者后端的靈魂所在
- 還沒有深入研究vue的computed甸各、methods以及watch屬性的實現(xiàn)垛贤，不過從現(xiàn)有的代碼來看，可能就是各自實現(xiàn)了獨特的Watcher趣倾，其中有著不同的updateFn方法
以上都是我瞎編的
