- 下載源碼地址
源碼:https://github.com/vuejs/vue 下載源碼地址. -
準(zhǔn)備工作
為了方便在源碼在瀏覽器中調(diào)試使用,在 package.json 中script 中 dev 添加 sourcemap
package.json -
如何找到項(xiàng)目入口文件
分析 package.json查找文件目錄
package.json - 1中查找 scripts 文件下的 config.js
-
在 scripts/config.js 中查找 web-full-dev
image.png -
3中查找文件的 resolve 的別人目錄
resolve 方法 -
aliases 中分析路徑
aliases
通過(guò)aliases和 3分析得知,源碼的入口文件目錄是src/platforms/web/entry-runtime-with-compiler.js
Vue 的初始化
-
在src/platforms/web/entry-runtime-with-compiler.js文件中,發(fā)現(xiàn) Vue 的原型上面掛載$mount 方法,查找 Vue 的初始化方法
image.png
entry-runtime-with-compiler.js
runtime/index -
7 中 core/index 通過(guò)aliases的圖片中分析 core 代表 src/core/index
src/core/index - 8中查找 Vue 的初始化函數(shù)
-
9初始化全局方法:其中包括 Vue.component,Vue.filter,Vue.diective,Vue.use,Vue.mixin,Vue.util,Vue.extend
instance.js -
10 代表 Vue 的初始化函數(shù)
image.png - 調(diào)用_init 函數(shù)
截圖 11 中代表 Vue 初始化過(guò)程
-
在 Vue 開(kāi)始初始化的時(shí)候,首先合并選項(xiàng),合并的結(jié)果是產(chǎn)生全局的組件.全局的組件.合并的結(jié)果如下
image.png -
合并選項(xiàng)結(jié)束之后正式開(kāi)始 Vue 的初始化
image.png - 截圖中標(biāo)注的 15的地方各個(gè)函數(shù)調(diào)用即表示 Vue 的初始化的過(guò)程
- initLifecycle
表示初始化組件的父類(lèi)(root),子類(lèi)(
refs),已經(jīng)內(nèi)部定義的監(jiān)聽(tīng)
image.png -
initEvents
初始化事件,需要注意的是事件的派發(fā)和事件的執(zhí)行時(shí)同一個(gè)對(duì)象
image.png
截圖中 16 的標(biāo)識(shí)的意思是子類(lèi)拿到父類(lèi)事件,然后在之類(lèi)中執(zhí)行.從而證明事件的派發(fā)和執(zhí)行都是一個(gè)對(duì)象
- initRender
initRender方法是初始化組件的插槽scopedSlots,
attrs 和$listeners屬性
上述完成之后開(kāi)始調(diào)用beforeCreate,完成beforeCreate的過(guò)程 - beforeCreate 完成之后開(kāi)始開(kāi)始數(shù)據(jù)的處理
- initInjections 開(kāi)始注入數(shù)據(jù) injections 屬于最早的數(shù)據(jù),在后續(xù)的 computed 和 data 中可以使用injections中的數(shù)據(jù)
-
initState 表示初始化數(shù)據(jù)順序如下圖所示
image.png - 最先開(kāi)始初始化的數(shù)據(jù)是 props 數(shù)據(jù)(1)
- 其次是方法(2)
- 再是data 數(shù)據(jù)(3)
- 再是計(jì)算數(shù)據(jù)(computed)
- 最后是監(jiān)聽(tīng)數(shù)據(jù)(watch)
從初始化的順序可以看出來(lái),在 data 中可以使用 props 數(shù)據(jù)和 inject 數(shù)據(jù) -
initProvide 在 vue 中 inject 和 provide 是成對(duì)出現(xiàn)的,inject 的數(shù)據(jù)可以通過(guò) provide 的數(shù)據(jù)得到,initProvide表示初始化接收器
image.png -
上述數(shù)據(jù)初始化完成之后開(kāi)始初始化 Vue 的方法
image.png - stateMixin 初始化屬性和方法 如
props/
delete()/$watch()方法
- eventsMixin 初始化數(shù)據(jù)方法 比如
on()/
once()
- lifecycleMixin 初始化生命周期方法 _update()內(nèi)部更新方法
destory 組件銷(xiāo)毀
- renderMixin 初始化方法
mount 方法,完成 Vue 的初始化
-
Vue 的初始化完成準(zhǔn)備開(kāi)始掛載$mount()
image.png
聲明$mount的函數(shù)文件在src/platforms/web/entry-runtime-with-compiler.js中
在申明的后面調(diào)用 mount
mount 聲明在文件src/platforms/web/runtime/index.js
mount 函數(shù)最后調(diào)用 mountComponent 函數(shù)
mountComponent函數(shù)聲明在文件src/core/instance/lifecycle.js
在 mountComponent 中首先聲明updateComponent 函數(shù),然后初始化一個(gè)總 watch,把updateComponent 當(dāng)成參數(shù)傳遞過(guò)程,在 watch 組件中會(huì)執(zhí)行 updateComponent.
在 updateComponent 函數(shù)中有兩個(gè)重要的函數(shù)_update,_render 方法
- _render 方法是把真實(shí) dom 轉(zhuǎn)成虛擬 dom.
-
_update 方法是把 vdom==>dom,下圖中的1在初始化的時(shí)候 prevVnode 為 null,會(huì)進(jìn)入初始化流程.從而完成 Vue 的初始化.從而完成整個(gè) Vue 的初始化
image.png
