Vue源碼全方位深入解析

一、資源

1. Vue.js解密文檔：https://ustbhuangyi.github.io/vue-analysis/prepare/

2. flow類型註釋官方文檔：https://flow.org/en/docs/types/

二、環境配置

1. flow

(1) npm install --global flow-bin 全局安裝

(2) 新建一個文件夾，比如flow-test，然後在文件夾下新建js文件，比如index.test（文件開頭必須有/@flow/，不然flow不會檢查這個文件）。在命令行中cd到flow-test文件夾。

(3) 執行 flow init 初始化配置，然後執行flow查看錯誤情況。（當進行類型註釋時，在js文件中會報錯，但是在命令行中輸入flow進行靜態類型檢查不會報錯）。

三、基礎知識

1.靜態類型與動態類型

編程語言一般分爲動態類型、靜態類型和強類型、弱類型，例如Java是靜態、強類型編程語言，而JavaScript是動態、弱類型編程語言。

（1）動態類型語言

是運行期間才做數據類型檢查的語言，即動態類型語言編程時，永遠不用給任何變量指定數據類型。該語言會在第一次賦值給變量時，在內部將數據類型記錄下來。例如：JavaScript、Python、PHP。

優點：方便閱讀，不需要寫非常多的類型相關的代碼；

缺點：不方便調試，命名不規範時會造成讀不懂，不利於理解等。

（2）靜態類型語言

是編譯期間做檢查數據類型的語言，即寫程序時要聲明所有變量的數據類型，是固定的。使用數據之前，必須先聲明數據類型（int ,float,double等）。相當於使用之前，首先要爲它們分配好內存空間。

例如：C/C++是靜態類型語言的典型代表，其他的靜態類型語言還有C#、JAVA等。

優點：結構非常規範，便於調試，方便類型安全

缺點：爲此需要寫更多類型相關代碼，較複雜。

四、Vue源碼構建

1. 通常我們利用 vue-cli 去初始化我們的 Vue.js 項目的時候會詢問我們用 Runtime Only 版本的還是

   Runtime + Compiler 版本。

   // 需要編譯器的版本
   new Vue({
   template: ‘

   {{ hi }}
   ’
   })

因爲在 Vue.js 2.0 中，最終渲染都是通過 render 函數，如果寫 template 屬性，則需要編譯成 render 函數，那麼這個編譯過程會發生運行時，所以需要帶有編譯器的版本。

五、數據驅動

1. Vue.js 中 Virtual DOM 是借鑑了一個開源庫 snabbdom的實現，然後加入了一些 Vue.js 特色的東西。

2. 初始化一個vue項目後，在node_modules\vue\dist\vue.esm.js的_init()方法中插入debugger。

npm run dev後，打開http://localhost:8080/#/網頁，查看開發者工具的source可調試代碼。

---

作者：deryabuder
來源：CSDN
原文：https://blog.csdn.net/sinat_31900531/article/details/89047922
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！