Vue2
生命周期的定义
一个组件从创建开始经历了数据初始化，挂载，更新等步骤后，最后被销毁的过程。
生命周期的过程
总共分为8个阶段:创建前/后，载入前/后，更新前/后，销毁前/后。
- 创建 — 在组件创建时执行
- 挂载 — DOM 被挂载时执行
- 更新 — 当响应数据被修改时执行
- 销毁 — 在元素被销毁之前立即运行
| 生命周期 | 描述 |
|---|---|
| beforeCreate | vue实例的挂载元素el和数据对象data都为undefined，还未初始化。 |
| created | vue实例的数据对象data有了，el为undefined，还未初始化。 |
| beforeMount | vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。 |
| mounted | vue实例挂载完成，data.message成功渲染。 |
| beforeUpdate | 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前 |
| updated | 组件DOM已经更新，执行依赖于DOM的操作 |
| activited | keep-alive专属，组件被激活时调用 |
| deadActivited | keep-alive专属，组件被销毁时调用 |
| beforeDestory | 组件销毁前调用 |
| destoryed | 组件销毁后调用 |
第一次页面加载会触发哪几个钩子
beforeCreate, created, beforeMount, mounted 。
DOM 渲染在 哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了
父子组件生命周期执行顺序
- 加载渲染过程 父beforeCreate->父created->-父beforeMount-> 子beforeCreate -> 子created-> 子beforeMount-> 子mounted->父mounted
- 子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated
- 父组件更新过程 父beforeUpdate->父updated
- 销毁过程 父beforeDestroy->子beforeDestory->子destroyed->父destoryed
在哪个生命周期内调用异步请求？
可以在钩子函数created、beforemount、mounted中进行调用。
Vue3
完整生命周期钩子函数
- onBeforeMount——挂载开始前调用
- onMount——挂载后调用
- onBeforeUpdate——当响应数据改变，且重新渲染前调用
- onUpdated——重新渲染后调用
- onBeforeUnmount——Vue实例销毁前调用
- onUnmounted——实例销毁后调用
- onActivated——当keep-alive组件被激活时调用
- onDeactivated——当keep-alive组件取消激活时调用
- onErrorCaptured——从子组件中捕获错误时调用
如何使用Vue3生命周期钩子函数
在组合API中，首先需要将生命周期钩子导入到项目中，才可以使用。
import {onMounted} from 'vue'
可能会追问的问题：
- setup和created谁先执行
- setup为什么没有beforeCreate和created
