Vue源碼解析-Vue初始化流程

  • entry-runtime-with-compiler.js (打包入口文件)
    • 擴(kuò)展了 $mount 方法 
        const mount = Vue.property.$mount
  • web/runtime/index.js
    • 聲明補(bǔ)丁函數(shù)patch (執(zhí)行diff)
    • 聲明 $mount 方法 (得到要掛載的宿主元素==>執(zhí)行掛載 mountComponent )
  • src/core/index.js
    • 初始化全局API (initGlobalAPI(Vue))
      聲明了 use,set,delete,component,nextTick 等方法
  • src/core/instance/index.js
    • Vue 構(gòu)造函數(shù)
      • 執(zhí)行 _init() 方法
      • 實(shí)例方法的初始化 
        initMixin(Vue)  // 混入 _init()    '(向下關(guān)聯(lián)init.js)
stateMixin(Vue)  // $set/$delete/$watch
eventsMixin(Vue) // $emit/$on/$off/$onec
lifecycleMixin(Vue) // $_update / $forceUpdate
renderMixin(Vue)  // $nextTick / _render
  • src/core/instance/init.js 
    initLifecycle(vm) // $root / $parent / $children / $refs
initEvent(vm) //event 在父組件創(chuàng)建,在子組件監(jiān)聽(tīng)
initRender(vm)  // slots/$createElement
callHook => breforeCreate // 組件創(chuàng)建之前的鉤子
initInjections(vm) // 先注入祖輩傳遞的數(shù)據(jù)(此時(shí)數(shù)據(jù)為空)
initState(vm) //組件數(shù)據(jù)初始化 (包括:data/props/methods/computed/watch等)  (向下關(guān)聯(lián) state.js)
initProvide(vm) //后提取數(shù)據(jù)
callHook => created
  • src/core/instance/state.js
    initState() //進(jìn)行了數(shù)據(jù)響應(yīng)式處理
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容