1、準備工作
- 下載
vue原始碼
git clone https://github.com/vuejs/vue.git複製程式碼- 安裝
rollup
sudo npm i -g rollup //mac
npm i -g rollup //window複製程式碼- 修改
package.json 中 scripts新增--sourcemap
"scripts": {
"dev": "rollup -w -c scripts/config.js
--sourcemap
--environment TARGET:web-full-dev",
.....
}
複製程式碼- test資料夾下新建測試
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue測試</title>
<script src="../dist/vue.js"></script>
</head>
<body>
<div id='demo'>
<h1>測試vue</h1>
<p>{{foo}}</p>
</div>
<script>
const app = new Vue({
el: '#demo',
data: {
foo: 'foo'
}
})
</script>
</body>
</html>
複製程式碼- 執行
npm run dev後在頁面開啟test.html
2、開始看程式碼
2.1 在package.json可以看到入口檔案為scripts/config.js執行函式
為web-full-dev
"scripts": {
"dev": "rollup -w -c scripts/config.js --sourcemap --environment
TARGET:web-full-dev"
}複製程式碼2.2 開啟 scripts/config.js 找到web-full-dev可以看到他的入口檔案是web/entry-runtime-with-compiler.js
那麼問題來了,這裡的web是代表的那個檔案目錄呢?在首目錄中並沒有發現web資料夾??其實很好找到,讓我們進入resolve()統一引入了./alias檔案,進入./alias看看吧
綜上所述找到入口檔案src/platforms/web/entry-runtime-with-compiler.js
3. vue初始化流程
3.1 入口檔案程式碼解析(詳見程式碼註釋)
- 獲取原始的$mount方法並擴充套件它:處理template或el選項
- 處理template選項 render>template>el
- render優先順序最高
- 設定el,則將其作為模版
- 執行編譯,使用者編寫的模版變成渲染函式
- 執行掛載:虛擬dom->dom
3.2 使用瀏覽器?跑一?♀️跑
3.3 打斷點除錯
4、看vue原始碼,咋沒見vue例項?不要著急這就上了?
4.1 回到我們的入口檔案找到引入的vue點進去
4.2 木有,再進
4.3 木有,再進(大佬,你在搞什麼,俄羅斯套娃?嗎)
4.4 莫慌,馬上就到了(為了程式碼的可讀性我可是做了分層哦?)
綜上所訴找到Vue例項檔案:src/core/instance/index.js
5、init?看看它的初始化順序
5.1 init初始化檔案src/core/instance/init.js
- 初始化順序: 生命週期->事件監聽->渲染->beforeCreate->注入->元件狀態(data,methods……資料相應化)->提供資料->created