vue初始化生命周期图
目标
解析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()
结语
-
new Vue发生了什么?
- mergeOptions 合并 options属性
- 初始化定义root, refs等属性
- 初始化定义方法 once, $off
- 创建_c,attrs,$listeners方法
- 执行beforeCreate生命周期
- 定义inject方法
- 定义 props,methods,data,computed,watch并且优先级 props > methods > data
- initData 将数据响应化
- 定义provide方法
- 执行created生命周期
-
Vue的生命周期
-
组件创建,挂载,更新,销毁的过程。
-
生命周期钩子使我们在合适地方做合适的事。
-
生命周期
- 创建 beforeCreate、created
- 挂载 beforeMount、mounted
- 更新 beforeUpdate、updated
- 销毁 beforeDestroy、destroyed
-
应用
- created 所有的数据准备就绪,适合做数据获取,赋值等操作,获取不到dom
- mounted dom已经生成,子组件也挂载可以访问它们。
- updated 数值变化已作用dom,可以获取dom的最新状态。
- destroyed 组件实例销毁,适合取消定时器等操作
-