vue源碼解析一

　　以前說了一下Vue的大概原理，咱們本身也來實現了一個，下面咱們實際看看Vue的源碼；版本：2.x

 

1.回顧本身實現的Vue原理　　

　　咱們本身實現的vue的基本原理，分爲兩個部分，第一部分初始化：經過Oberver給data中每一個屬性添加get/set方法，在get方法中添加註冊Watcher的邏輯，在set方法中添加notify的邏輯；而後編譯那些html標籤，丟到虛擬節點樹中，而且根據節點類型建立不一樣的Watcher（注意，建立Watcher時候傳入的回調函數是用於覆蓋該節點中佔位符的值）；

　　第二部分：初始化以後，用戶使頁面上的數據發生變化，觸發set方法，set方法中會觸發notify方法，而後就調用全部的Watcher的update方法，進而調用每一個Watcher的回調函數，覆蓋節點的值，刷新頁面數據；

　　這個就是Vue的乞丐版了，弄懂了前面幾篇文章，再看下圖就比較容易了；

 

2.查看Vue源碼的準備工做

　　看源碼首先咱們要知道Vue的源碼究竟是什麼？不會還有人覺得看Vue的源碼就是直接看那個vue.js文件吧.....

　　那個js文件幾萬行，什麼神人才能直接編寫這種js文件啊？

　　在咱們本身寫項目的時候的js文件比較小，直接引入就行了，可是當js文件太大的時候，咱們就須要使用一個項目來進行管理了，具體的流程就相似下圖所示。

　　其中rollup是比webpack更輕量級的插件，只會對js進行構建

 

　　

　　因此咱們看的源碼就是在github那裏，下載就好：Vue源碼 ，下載以後目錄：

 

　　提早知道一個東西，js的一個比較大的問題就是沒有類型檢查，因而有了js的超集Typescript，簡稱ts，在ts中是支持類型檢查和類型推斷的；

　　flow和ts看起來用法幾乎差很少，Vue2.x使用到了flow(固然，3.x就引入了ts了)，有興趣的能夠去看看，寫法相似下面這種，就是加了變量類型聲明而已，用法和js同樣的使用；

 

3.Vue源碼編譯流程

　　咱們看到Vue源碼的目錄結構，應該能知道這是npm管理的，因此咱們能夠在package.json中找到相關的打包命令：

 

　　其實就是node去執行scripts/build.js文件，咱們看看scripts/build.js文件：

 

　　而後咱們看看scripts/config.js中，其實就是編譯不一樣環境下的js文件，這點比較關鍵！

　　後面咱們以web/entry-runtime-with-compiler.js入口文件分析建立Vue實例的過程；

 

 

4.Vue建立實例

　　咱們以web/entry-runtime-with-compiler.js入口文件爲例，通過了上面的對路徑的各類切割映射，最後拼接的目錄應該是：src/platforms/web/entry-runtime-with-compiler.js，咱們打開這個js文件看看：

 

　　看看那個index.js，發現還要進入到core/index中看看

 

　　core/index文件中能夠看到要去instance/index；

 

 

　　instance/index文件中：