Vue2.x初始化流程

344 阅读2分钟

vue初始化生命周期图

Vue初始化生命周期图.png

目标

解析Vue初始化流程

知识点

下载Vue源码 git clone github.com/vuejs/vue.g… 版本2.6.11

调试环境

  • 安装依赖: npm i

  • 安装rollup:npm i -g rollup

  • 修改dev脚本:添加sourcemap,package.json

    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web- full-dev"
    
  • 运行开发命令:npm run dev

  • 引入前面创建的vue.js

    <script src="../../dist/vue.js"></script>
    

初始化流程

整体流程

  • new Vue()

    • this._init()
  • $mount

    • mountComponent

      • updateComponent()

        • render()
        • update()
      • new Watcher()

文件流程 ->以src为入口

platforms/web/entry-runtime-with-compiler.js

扩展默认$mount方法:处理template或el选项

platforms/web/runtime/index.js

安装web平台特有指令和组件

定义patch:补丁函数,执行patching算法进行更新

定义$mount:挂载vue实例到指定宿主元素(获得dom并替换宿主元素)

core/index.js

初始化全局api

Vue.set = set
Vue.delete = del 
Vue.nextTick = nextTick 
initUse(Vue) // 实现Vue.use函数
initMixin(Vue) // 实现Vue.mixin函数 
initExtend(Vue) // 实现Vue.extend函数 
initAssetRegisters(Vue) // 注册实现Vue.component/directive/filter

core/instance/index.js

Vue构造函数定义

function Vue (options) {
// 构造函数仅执行了_init 
this._init(options)
}
initMixin(Vue) // 实现init函数 
stateMixin(Vue) // 状态相关api $data,$props,$set,$delete,$watch 
eventsMixin(Vue)// 事件相关api $on,$once,$off,$emit 
lifecycleMixin(Vue) // 生命周期api _update,$forceUpdate,$destroy 
renderMixin(Vue)// 渲染api _render,$nextTick

core/instance/init.js

创建组件实例,初始化其数据、属性、事件等

initLifecycle(vm) // $parent,$root,$children,$refs 
initEvents(vm) // 处理父组件传递的事件和回调 
initRender(vm) // $slots,$scopedSlots,_c,$createElement 
callHook(vm, 'beforeCreate') 
initInjections(vm) // 获取注入数据 
initState(vm) // 初始化props,methods,data,computed,watch 
initProvide(vm) // 提供数据注入 
callHook(vm, 'created')

platforms/web/runtime/index.js

  • mountComponent

    • 执行挂载,获取vdom并转换为dom
  • new Watcher()

    • 创建组件渲染watcher
  • updateComponent()

    • 执行初始化或更新
  • update()

    • 初始化或更新,将传入vdom转换为dom,初始化时执行的是dom创建操作

core/instance/render.js

render() 渲染组件,获取vdom

流程明细

new Vue() => _init() => $mount => mountComponent() => new Watcher() => updateComponent() => render() => _update()

结语

  1. new Vue发生了什么?

    1. mergeOptions 合并 options属性
    2. 初始化定义parent,parent, root, children,children, refs等属性
    3. 初始化定义方法 on,on, once, $off
    4. 创建_c,createElement也就是render(h)h函数,定义createElement也就是render(h)的h函数,定义attrs,$listeners方法
    5. 执行beforeCreate生命周期
    6. 定义inject方法
    7. 定义 props,methods,data,computed,watch并且优先级 props > methods > data
    8. initData 将数据响应化
    9. 定义provide方法
    10. 执行created生命周期
  2. Vue的生命周期

    1. 组件创建,挂载,更新,销毁的过程。

    2. 生命周期钩子使我们在合适地方做合适的事。

    3. 生命周期

      • 创建 beforeCreate、created
      • 挂载 beforeMount、mounted
      • 更新 beforeUpdate、updated
      • 销毁 beforeDestroy、destroyed
    4. 应用

      • created 所有的数据准备就绪,适合做数据获取,赋值等操作,获取不到dom
      • mounted dom已经生成,子组件也挂载可以访问它们。
      • updated 数值变化已作用dom,可以获取dom的最新状态。
      • destroyed 组件实例销毁,适合取消定时器等操作