1、什么是Vue生命周期?
Vue实例从创建到销毁的过程,就是Vue的生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom – > 渲染、更新–>渲染、卸载等一系列过程,我们称这是Vue的生命周期。
2、Vue生命周期的作用是什么?
它的生命周期中有多个事件钩子,让我们在控制整个vue实例的过程时更容易行程好的逻辑。
3、vue生命周期总共有几个阶段?详细讲讲
答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后
创建前/后: 在beforeCreated阶段,vue实例的挂载元素 $el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。

载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。

更新前/后:当data变化时,会触发beforeUpdate和updated方法。

销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

4、DOM 渲染在 哪个周期中就已经完成?
答:DOM 渲染在 mounted 中就已经完成了。

在这里插入图片描述
beforecreated:$el 和 data 并未初始化
created:完成了 data 数据的初始化, $ el 没有 (初始化data的操作应该放在created而不是beforeCreated)
beforeMount:完成了 $el 和 data 初始化
mounted :完成挂载
关于生命周期用法:
beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容

再分享一篇文章:如何在面试中讲解生命周期
https://segmentfault.com/a/1190000014376915

可以结合文章http://www.cnblogs.com/pangmin/p/9039673.html
推荐一篇写的比较详细的文章
https://segmentfault.com/a/1190000011381906?utm_source=tag-newest

Logo

前往低代码交流专区

更多推荐