【vue】生命周期

vue挂载流程详解

1.确定挂载的DOM元素,这个DOM需要保证不能为html，body这类根节点。
2.template或者手写render函数
3.调用$mount方法准备挂载
=》mountComponent
=》new Watcher(vm, updateComponent, noop, {})
=》updateComponent
=》vm._update(vm._render(), hydrating);
=》_render（生成一个Virtual Dom tree）
=》_update（转化为真实的DOM节点）

vue生命周期

看`this.$el/this.$data`的是否初始化好

期间（初始化生命周期函数=》初始化事件=》初始化渲染，生成虚拟DOM并返回）
1.beforeCreate（el没data没）

期间（始化data、props、computed、watcher=》）

2.created（vue实例创建完成后，el无data有）

3.beforeMount（挂载之前）
el无data有，
该方法执行执行后，虚拟dom已经好了，页面还未渲染

4.mounted（挂载之后）
el有data有，组件已经挂载，页面已经渲染

5.beforeUpdate（数据更新触发）
虚拟dom已经更新，页面还未渲染

6.updated（数据更新触发）
页面已经渲染

备注：博客
https://www.cnblogs.com/fly_dragon/p/6220273.html
https://segmentfault.com/a/1190000011381906

接下来所有的操作都是在这个实例上添加方法

=> initLifecycle(vm) // lifecycle初始化
=>initEvents(vm) // events初始化 vm._events, 主要是提供vm实例上的$on/$emit/$off/$off等方法
=>initRender(vm) // 初始化渲染函数,在vm上绑定$createElement方法
=*>callHook(vm, 'beforeCreate') // 钩子函数的执行, beforeCreate*****
=>initInjections(vm) // resolve injections before data/props
=>initState(vm) // Observe data添加对data的监听, 将data转化为getters/setters
=>initProvide(vm) // resolve provide after data/props
=*>callHook(vm, 'created') // 钩子函数的执行, created*****


// vm挂载的根元素

if (vm.$options.el) {
vm.$mount(vm.$options.el) //挂载，没有的话需要手动$mount(vm.$options.el)
}

=》进入$mount函数（
=>mountComponent src\core\instance\lifecycle.js
=>callHook(vm, 'beforeMount')// 钩子函数的执行, beforeMount*****
=> updateComponent = () => {
vm._update(vm._render(), hydrating)//_update生成虚拟dom，_render再映射为真实dom
}
=》callHook(vm, 'mounted')// 钩子函数的执行, mounted*****

）

总结：

• 1.beforeCreate data/propos啥也没，只是初始化生命周期函数/事件
• 2.created data/props有了，并且增加了监听
• 3.beforeMount
• 4.mounted 真实dom已经有了并渲染