Vue常见面试题：Vue的生命周期以及父子组件钩子函数的执行顺序？（超详细）

一.谈谈你对vue的生命周期的理解？

1、生命周期是什么？

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

2、各个生命周期阶段及其钩子函数

vue的生命周期核心经历了四个阶段，在四个阶段的前后分别有两个钩子函数。

---

第一阶段：数据挂载阶段：把配置项data中的属性，赋给了vue对象本身，并做了数据劫持。

1、beforeCreate: 这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点(没有data，没有el)
使用场景: 因为此时data和methods都拿不到，所以通常在实例以外使用，比如设置loading加载
2、created:实例已经创建，仍然不能获取DOM节点(有data，没有el）
使用场景︰模板渲染成html前调用，此时可以获取data和methods，so可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里，比如发请求

---

第二阶段：模板渲染阶段：把vue对象的数据渲染到模板上。

1、beforeMount:是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建〈有data，有el)
2、mounted:数据和DOM都已经被渲染出来了
使用场景∶模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里

---

第三阶段：组件更新阶段：当数据发送变化时，组件会进行重新渲染，所以，准确的说是，组件重新渲染阶段。

1、beforeUpdate:检测到数据更新时，但在DOM更新前执行
2、updated:更新结束后执行
使用场景∶需要对数据更新做统―处理的;如果需要区分不同的数据更新操作可以使用$nextTick

---

第四阶段：组件销毁阶段：组件销毁。

1、 beforeDestroy :当要销毁vue实例时，在销毁前执行
2、destroyed:销毁vue实例时执行

---

补充：当使用keep-alive包裹组件时，会有组件激活和停用之说，这两个钩子函数分别是：activited和deactivated

activated：当keep-alive包含的组件再次被渲染时触发
deactivated：当keep-alive包含的组件销毁时触发

二.何时需要使用beforeDestroy？

总体来说，需要清除的是：当前组件不会自动销毁的数据（不属于当前组件的数据），并且该数据只是在当前组件里使用。

1）、清除定时器（定时器是window对象的，不主动清除，是不会清除的）

2）、on方法，那需要在组件销毁前解绑。（on虽然属于Vue的实例方法，但是，这个实例很有可能不是当前vue组件（如：事件总线中的用法））

3）、解除事件的绑定 scroll mousemove （这些事件是绑定在window对象或者document对象上的）

---

三.Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父子组件钩子函数的执行顺序可以归类为4个 部分：

第一部分：首次加载渲染
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

第二部分：父组件修改子组件的props值时：
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

第三部分：父组件修改的数据跟子组件没有关系时
不会影响子组件 父 beforeUpdate -> 父 updated

第四部分：销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

---

四.在哪个生命周期内调用异步请求？

大部分时候，会在created发送请求。
因为，
1）、此时data已经挂载到vue实例了，放在beforeCreate里太早，vue实例没有数据，放在mounted里太晚。
2）、放在 created 中有助于一致性，因为ssr不支持 beforeMount 、mounted 钩子函数。
Created的使用场景：如果组件的初始数据来自于后端，那就在created里发送请求