之前說了一下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檔案中：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/244641.html
標籤：JavaScript
上一篇：SVN操作流