vue生命周期相关面试题

vue vue生命周期相关面试题

$vue的8个生命周期$

beforeCreate（初始化界面前）
created（初始化界面后）
beforeMount（渲染dom前）
mounted（渲染dom后）
beforeUpdate（更新数据前）
updated（更新数据后）
beforeDestroy（卸载组件前）
destroyed（卸载组件后）

$生命周期图$

---

$总共分为8个阶段：创建前/创建后，载入前/后，更新前/后，销毁前/后。$

1）创建前(beforeCreate) 对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

2）创建后（created）
<card :item="{ title: item.name,description: item.desc, poster: item.img }>
对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

3，载入前（beforeMount） 对应的钩子函数是beforeMount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂 载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4，载入后（mounted） 对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写
在这里。在这个阶段，数据和DOM都已被渲染出来。

5，更新前（beforeUpdate）
对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate
函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作 用。

6，更新后（updated） 对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

7，销毁前（beforeDestroy）
对应的钩子函数是beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新，当我们不
再需要vue操纵DOM时，就要销毁Vue,也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

8，销毁后(destroyed)对应的钩子函数是destroyed。 在销毁后，会触发destroyed钩子函数。
vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可
以准确的控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继 承。

$（1）什么是vue生命周期？$

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

$（2）vue生命周期的作用是什么？$

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

$（3）vue生命周期总共有几个阶段？$

可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后。

$（4）第一次页面加载时会触发哪几个钩子？$

第一次页面加载时会触发beforeCreate，created，beforeMount，mounted这几个钩子

$（5）Dom渲染在哪个周期就已经完成？$

Dom渲染在mounted中就已经完成了。