深入解析vue生命周期

vue实例中从创建——>销毁的过程即vue生命周期

1.创建 2.初始化数据 3.编译template 4.挂载DOM 5.渲染 6.更新渲染 7.卸载

常见生命周期流程

• beforeCreate：实例创建之初
• created：组件已经创建完成，异步请求获取数据，dom并没有生成
• beforeMount：组件挂载之前
• mounted：组件挂载之后，异步请求获取 render dom更新 页面变化
• beforeUpdate：数据发生变化，更新之前
• beforeDestroy：实例销毁前
• destroyed：销毁后
• activated：keep-alive 组件激活
• deactivated：keep-alive 组件停用
• errorCaptured：捕获实例错误

• 如何回答vue的生命周期才能令面试官满意呢？

new Vue() const vm = new Vue(){} //创建空的实例对象
init events lifecycle
//beforeCreate
init reactivity data injection methods
//created
option
-yes
-false el option vm.$mount(el)

template
-yes compile
-no el outerHTML as template
//beforeMount 此时模板已经编译好，但页面未更新
vm.$el replace $el
//mounted 在dom上进行渲染完成
//beforeUpdate 
VDOM re-render patch
//updated
//beforeDestroy
data methods filter directive 可用
//destroyed

• 在谈到Vue的生命周期的时候，首先需要创建一个实例，也就是在 new Vue ( ) 的对象过程当中，先执行了init（init是vue组件里面默认去执行的）
• 在init的过程当中首先调用了beforeCreate，然后在injections（注入）和reactivity（反应）的时候，它会再去调用created。
• 所以在init的时候，事件已经调用了，我们在beforeCreate的时候千万不要去修改data里面赋值的数据，最早也要放在created里面去做（添加一些行为）。
• 当created完成之后，它会去判断instance（实例）里面是否含有“el”option（选项）
• 如果没有的话，它会调用vm.$mount(el)这个方法，然后执行下一步；
• 如果有的话，直接执行下一步。
• 紧接着会判断是否含有“template”这个选项，如果有的话，它会把template解析成一个render function ，这是一个template编译的过程，结果是解析成了render函数
• render函数是发生在beforeMount和mounted之间的，这也从侧面说明了，在beforeMount的时候，$el还只是我们在HTML里面写的节点，然后到mounted的时候，它就把渲染出来的内容挂载到了DOM节点上。
• 这中间的过程其实是执行了render function的内容
• beforeMount在有了render function的时候才会执行，当执行完render function之后，就会调用mounted这个钩子，在mounted挂载完毕之后，这个实例就算是走完流程了
• 有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。