剖析 Vue.js 內部運行機制 （1）

1. new Vue() 以後。 Vue 會調用 _init 函數進行初始化，也就是這裏的 init 過程，它會初始化生命周

期、事件、 props、 methods、 data、 computed 與 watch 等。其中最重要的是經過

Object.defineProperty 設置 setter 與 getter 函數，用來實現「 響應式」以及「 依賴收集」

2. mounted 初始化以後調用 $mount 會掛載組件，若是是運行時編譯，即不存在 render function 可是存在

template 的狀況，須要進行「 編譯」步驟。

3. compile

(1) parse

parse 會用正則等方式解析 template 模板中的指令、class、style 等數據，造成 AST

(2) optimize

optimize 的主要做用是標記 static 靜態節點，這是 Vue 在編譯過程當中的一處優化，後面當 update 更新

界面時，會有一個 patch 的過程， diff 算法會直接跳過靜態節點，從而減小了比較的過程，優化

了 patch 的性能。

(3) generate

generate 是將 AST 轉化成 render function 字符串的過程

 

4. render function

讀取所需對象的值，因此會觸發 getter 函數進行「 依賴收

集」，「 依賴收集」的目的是將觀察者 Watcher 對象存放到當前閉包中的訂閱者 Dep 的 subs 中。

在修改對象的值的時候，會觸發對應的 setter， setter 通知以前「 依賴收集」獲得的 Dep 中的每個

Watcher，告訴它們本身的值改變了，須要從新渲染視圖。這時候這些 Watcher 就會開始調用 update 來

更新視圖，固然這中間還有一個 patch 的過程以及使用隊列來異步更新的策略

5. Virtual DOM

Virtual DOM 其實就是一棵以 JavaScript 對

象（ VNode 節點）做爲基礎的樹，用對象屬性來描述節點，實際上它只是一層對真實 DOM 的抽象。

最終能夠經過一系列操做使這棵樹映射到真實環境上。

好比說下面這樣一個例子：

{    tag: 'div',                 /*說明這是一個 div 標籤*/

    children: [                 /*存放該標籤的子節點*/

        {

            tag: 'a',           /*說明這是一個 a 標籤*/

            text: 'click me'    /*標籤的內容*/

        }

    ] }

 

渲染後能夠獲得

<div>

    <a>click me</a>

</div>

6. 更新視圖

咱們會將

新的 VNode 與舊的 VNode 一塊兒傳入 patch 進行比較，通過 diff 算法得出它們的「 差別」。最後我

們只須要將這些「 差別」的對應 DOM 進行修改便可。