關於一些Vue的文章。（7）

還有其他許多，就不一一枚舉出來了。

有沒有看上了的？

沒有我等下再來問。

在這篇文章裡我將是這幾個月來對 vue 學習的乙個小結。

vue 和其他的 mvvm 思路是類似的：

主要是為了實現三個過程:

observer: 通過observer對data進行監聽，並且提供訂閱某個資料項的變化的能力。利用object.defineproperty, 將data裡的每個屬性全部轉化為getter/setter，已遍攔截物件賦值與取值操作；

compiler: 將template 解析為 render()方法；

watcher: compiler 的解析結果與 observer 結合起來，在 observer 監聽到資料發生改變時，接受通知，進而觸發 re-render, 重新渲染dom。

我們從new vue開始，

上圖即是官網給出的一張生命週期圖，主要是四個過程：

現在，我們進入原始碼，分析具體的實現：

可以看出在beforecreate與created只有initstate,initstate是用於實現data observer和event/watcher。

具體vm.$mount的分析，請看上篇。最後進行了render(), 從而會有vnode， 經過 diff 演算法後會有真實 dom ；

將以上用一張序列圖表示也就是：

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。

在observe()裡，既是轉化為getter/setter。

object.defineproperty(obj, key, 

if (isarray(value)) 
}return
value
},set: function
reactivesetter (newval) 
if (setter)  else 
// observe 這個新資料
childob = observe(newval)
// 通知到dep 進行資料更新。
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, () => , noop)

具體可以看watcher.js:

截乙個關鍵**部分的圖：

以上，用一張序列圖來表示，既就是：

對以上總結： 完。

關於一些Vue的文章。（4）

diff演算法中的patchvnode方法，以及核心updatechildren方法。在上篇中，我們談到，當vnode不為真實節點，且vnode與oldvnode為同一節點時，會呼叫patchvnode方法。我們直接從原始碼上進行分析 patchvnode 有四個引數 oldvnode 舊的虛擬節點...

關於一些Vue的文章。（5）

前三篇裡，我們開始從render,template,el的渲染dom樹的優先順序，最終都編譯成render函式，而後得到vnode 虛擬dom 經過diff演算法後，得到真實dom。那麼問題來了？得到真實dom以後接下來該做什麼？以及怎麼做？照例，分享一篇文章，vue。官網，暫時還沒有找到一篇文章能...

關於一些Vue的文章。（5）

前三篇裡，我們開始從render,template,el的渲染dom樹的優先順序，最終都編譯成render函式，而後得到vnode 虛擬dom 經過diff演算法後，得到真實dom。那麼問題來了？得到真實dom以後接下來該做什麼？以及怎麼做？照例，分享一篇文章，vue。官網，暫時還沒有找到一篇文章能...