Vue生命周期函数面试题

1.什么是 vue 生命周期

Vue实例从创建到销毁的过程，就是Vue的生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom – > 渲染、更新–>渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2.vue生命周期的作用是什么

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易行程好的逻辑。

3.vue的生命周期

（开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染、卸载）主要分为八个阶段：
beforeCreate（创建前） created（创建后） beforeMount（载入前） mounted（载入后） beforeUpdate（更新前）, updated（更新后） beforeDestroy（销毁前） destroyed（销毁后）

beforeCreate data 和 $el 都没有初始化 全部为 undefined
created data 初始化完成，但 $el 没有初始化
beforeMount data 和 $el 均已存在，但 DOM 为虚拟DOM 仍未完全加载 eg：

{{message}}

mounted data 和 $el 均已存在，并且 DOM 加载完成 ，完成挂载

当data中数据发生改变时触发update相关函数
beforeUpdate 渲染完成，并监测到data发生变化，在变化的数据重新渲染视图之前会触发，这也是重新渲染之前最后修改数据的机会
updated 监测到data发生变化，并完成渲染更新视图之后触发

beforeDestory 实例销毁之前调用 ， 实例仍然完全可用。
destroyed 实例销毁后调用。调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

4.第一次页面加载会触发哪几个钩子

beforeCreate, created, beforeMount, mounted 。

5.简述每个周期具体适合哪些场景

beforeCreate 可以在此时加一些loading效果，在created时进行移除

created 需要异步请求数据的方法可以在此时执行，完成数据的初始化

mounted 当需要操作dom的时候执行，可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom

updated 当数据更新需要做统一业务处理的时候使用

6.created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。(调用第三方插件可以放在mounted里边)

7.vue获取数据在哪个周期函数

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载

8.请详细说下你对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结构依然存在

本文地址：https://blog.csdn.net/weixin_45586723/article/details/107257823