原文鏈接我的blog，歡迎STAR。
首先安利一波福利，有沒有用vscode的小伙伴？推薦一個神奇的字體，自從用了這個字體，敲代碼效率簡直上天了。先上圖看看效果：
還有其他許多，就不一一列舉出來了。
有沒有看上了的？
沒有我等下再來問。
這次推薦的一篇文章來自這，閱讀文章有利于加深對Vue程序結構的了解，雖然是 1.0版本，不過好在 2.0 版本保留了絕大部分 1.0 的API。
在這篇文章里我將是這幾個月來對 Vue 學習的一個小結。
思路
Vue 和其他的 MVVM 思路是類似的：
主要是為了實現三個過程:
Observer: 通過Observer對data進行監聽，并且提供訂閱某個數據項的變化的能力。利用
Object.defineProperty, 將data里的每個屬性全部轉化為getter/setter，已遍攔截對象賦值與取值操作；Compiler: 將template 解析為 render()方法；
watcher: Compiler 的解析結果與 Observer 結合起來，在 Observer 監聽到數據發生改變時，接受通知，進而觸發 re-render, 重新渲染DOM。
new Vue
我們從 new Vue 開始，
上圖即是官網給出的一張生命周期圖，主要是四個過程：
- create: 在 new Vue() 時會運行，創建出 Vue 對象。
- mount: 會根據 el, template, render 等，生成 Vnode, 完成 diff 算法后掛載到 DOM 上。
- updata: 當數據發生改變時，會重新渲染 DOM。
- destory: Vue 銷毀時會運行。
現在，我們進入源碼，分析具體的實現：
- Create: 首先運行
new vue()的時候，會進入_init，
其中關鍵部分的代碼如下：
可以看出在 beforeCreate 與 created 只有initState, initState 是用于實現data observer 和 event/watcher。
- Mount: 在
_init最后，會運行vm.$mount方法：
具體 vm.$mount 的分析，請看上篇。最后進行了 render(), 從而會有Vnode， 經過 DIFF 算法后會有真實 DOM ；
-
Update: DOM 之后，會進行update方法：
vm._watcher = new Watcher(vm, () => { vm._update(vm._render(), hydrating) }, noop)
將以上用一張序列圖表示也就是：
深入響應式原理 （Observer, watcher）
MVVM 框架有一個很重要的特征：就是當數據放生變化后，會自動更新對應的DOM節點。 Vue 是怎么實現的？
以上是來自官網的一張圖。
前面提到在 beforeCreate 與 created 兩個生命周期鉤子函數之間會運行 initState() 方法。
initState() 源碼里：
在這個方法里，會對props, data, computed 等屬性利用 Object.defineProperty 將這些屬性全部轉化為 getter/setter。
我們以 initData() 為例子進行分析：
這里有一個值得注意的地方,
proxy(vm, "_data", keys[i]), 設置vm._data為代理，具體作用是實現vm.a === vm._data.a。
在 initData()最后 會進行 observe(data, this) 。
在observe()里，既是轉化為 getter/setter 。
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
// 只有在有Dep.target時才說明是Vue內部依賴收集過程觸發的getter
// 那么這個時候就需要執行dep.depend(),將watcher(Dep.target的實際值)添加到dep的subs數組中
// 對于其他時候,比如dom事件回調函數中訪問這個變量導致觸發的getter并不需要執行依賴收集,直接返回value即可
if (Dep.target) {
dep.depend()
if (childOb) {
// 如果value在observe過程中生成了ob實例,那么就讓ob的dep也收集依賴
childOb.dep.depend()
}
if (isArray(value)) {
//如果數組元素也是對象,那么他們observe過程也生成了ob實例
dependArray(value)
}
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val
if (newVal === value) {
return
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
// observe 這個新數據
childOb = observe(newVal)
// 通知到dep 進行數據更新。
dep.notify()
}
})
到這個時候，Observer 監聽已經完成，如果數據更新，我們會進行 dep.notify() 方法：
dep.notify() , 方法里會執行update()：
update() , 中會進行
queueWatcher() 方法：
queueWatcher(), 目的是通過 nextTicker 來執行 run() ：
在 run() 里，其實就是執行 this.get() 方法：
在 get() 方法里，會運行 this.getter(), 方法來更新 DOM 。
this.getter()方法是啥？
再就是上文中所提到的new Watcher(), 的第二個參數。
vm._watcher = new Watcher(vm, () => {
vm._update(vm._render(), hydrating)
}, noop)
而在 new Watcher 構造完成后，會調用 this.get() ，觸發 this.getter()，方法觸發 DOM 更新。
具體可以看watcher.js:
截一個關鍵代碼部分的圖：
以上，用一張序列圖來表示，既就是：
對以上總結：
- 首先
_init，對屬性利用Object.defineProperty，將屬性轉為getter/setter，在setter方法里，會調用dep.notify()。 - 對
vm設置new Watcher。 -
data變化時，進行數據跟新。
完。
