vuejs全局運行機制

行文介紹

本文經過一張流程圖來簡要的分析vue的【初始化，模板編譯，數據響應式，數據驅動視圖】的流程。

目的是理清思路。想看詳情的請看文末參考連接，或者查找其餘文檔，由於每一塊的內容都是不少的。

流程圖

搭配

本文能夠搭配我寫的 從new Vue()看源碼流程 食用。這篇文章主要是從源碼來梳理流程。

流程分析

1. 初始化以及掛載init, mount
2. 在進行模板編譯compile，將template編譯爲渲染函數render function
3. 執行render function生成Virtual DOM, render function => VNode tree
4. 再進行響應式依賴收集，render function => getter, setter => Watcher.update => patch。以及使用隊列進行異步更新的策略。
5. 經過diff算法後進行patch更新視圖

問題

問題來源

有這個問題是由於受這篇神文的影響剖析Vue原理&實現雙向綁定MVVM。它這裏面是精確收集的watcher，數據更新時直接更新指定的dom內容，很是高效。可是vue源碼中並無相似的實現。

數據變化時是【觸發精確watcher，直接更新指定DOM】，仍是【觸發render watcher, 而後走patch流程】？

答案是【觸發render watcher, 而後走patch流程】。

並且在源碼中打斷點，也能夠發現，當改變一個data時是會觸發render watcher的。

vue中有三種watcher

1. render Watcher
2. computed Watcher
3. watch Watcher

不信的，請vue源碼中搜索 new Watcher便可發現只有三處。(目前vue@2.6.10， 之後的版本不敢保證)

參考連接

https://www.kancloud.cn/hanxu...