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文件中:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM