之前說了一下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文件中：
