Vue 進階 （一）

Vue進階系列 參考至 VueDemo

Vue 運行機制全局概覽

內部流程圖：

1、初始化和掛載

1- 初始化

new Vue()以後會調用 init初始化函數。它會初始化生命週期、時間、methods、data、computed、watch等。

• Vue的數據響應。

是經過Object.defineProperty設置 getter 和 setter函數，來實現【響應式】和【依賴收集】。

2- 掛載

初始化後調用$mount 會掛載組件，隨後通過編譯，經過render function 。若是是運行時編譯，那麼就不須要render function。

可是若是時存在template的狀況， 就是須要進行【編譯】步驟了。

2、編譯

編譯分爲三個階段，parse optimize generate.最終須要獲得 render function。

• parse 【解析器】

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

• optimize 【優化器】

optimize 的主要做用是標記 static 靜態節點，這是 Vue 在編譯過程當中的一處優化，後面當 update 更新界面時，會有一個 patch 的過程， diff 算法會直接跳過靜態節點，從而減小了比較的過程，優化了 patch 的性能。

• generate 【代碼生成器】

generate 是將AST轉換爲render function 字符串的過程。獲得結果的是render function 的字符串，以及 staticRenderFns 字符串。

通過編譯的三個階段後，組件中就會出現渲染VNode 的 render function

3、響應式

這裏的 getter 跟 setter 已經在以前介紹過了，在 init 的時候經過 Object.defineProperty 進行了綁定，它使得當被設置的對象被讀取的時候會執行 getter 函數，而在當被賦值的時候會執行 setter 函數。

當渲染的時候，須要所需的值，所以會經過getter來進行【依賴蒐集】。

將數據的觀察者對象 Watcher對象存放在Dep中，這樣當數據發生變化的時候，就會出發setter. setter 通知以前的【依賴蒐集】獲得的Dep中的watcher對象，若是須要從新渲染試圖，watcher 就會調用update來更新DOM。固然中間還有patch過程。

4、Virtual DOM 虛擬DOM

咱們知道render function會轉換成虛擬DOM節點。Virtual DOM 實際上是一顆以javascript對象做爲基礎的樹。
實際上就是對真實DOM樹的一個抽象表示。最終虛擬DOM會經過一系列的操做獲得真實的DOM。

因爲 Virtual DOM 是以 JavaScript 對象爲基礎而不依賴真實平臺環境，因此使它具備了跨平臺的能力，好比說瀏覽器平臺、Weex、Node 等。

{
    tag: 'div',
    children: [
        {
            tag: 'a',
            text: 'love me'
        }
    ]
}

// 渲染爲

<div>
    <a>love me</a>
</div>

實際上節點有許許多多的屬性，好比isStatic表明是否爲靜態節點。 isComment 表明是否註釋節點。

5、更新渲染

會經過 setter -> Watcher -> update 的流程來修改對應的視圖，那麼最終是如何更新視圖的呢？

當數據變化後，執行 render function 就能夠獲得一個新的 VNode 節點，咱們若是想要獲得新的視圖，最簡單粗暴的方法就是直接解析這個新的 VNode 節點，而後用 innerHTML 直接所有渲染到真實 DOM 中。可是其實咱們只對其中的一小塊內容進行了修改，這樣作彷佛有些「浪費」。

這就要說到patch 了。咱們會將新的 VNode 與舊的 VNode 一塊兒傳入 patch 進行比較，通過 diff 算法得出它們的「差別」。最後咱們只須要將這些「差別」的對應 DOM 進行修改便可。

---

再看全局

接下來咱們繼續深刻學習吧，加油~~