Vue 生命周期

一、生命周期钩子

序号	生命周期	vue2	vue3(选项式)	vue3(组合式)
1	组件创建前	beforeCreate	beforeCreate	setup
2	组件创建完成	created	created	setup
3	组件挂载前	beforeMount	beforeMount	setup
4	组件挂载完成	mounted	mounted	onMounted
5	组件更新前	beforeUpdate	beforeUpdate	onBeforeUpdate
6	组件更新完成	update	update	onUpdate
7	组件卸载前	beforeDestroy	beforeUnMounted	onBeforeUnmounted
8	组件卸载完成	destroyed	unMounted	-
9	keep-alive 缓存的组件激活时	activated	activated	onAtivated
10	keep-alive 缓存的组件失活时	deactived	deactived	onDeactivated
11	捕获来自子孙组件错误时	errorCaptrued	errorCaptrued	onErrorCaptrued

二、各生命周期发生的事

1. beforeCreate ==> created 组件创建之前

   • 初始化 vue 实例，进行数据计算

2. created 组件创建完成

   • 完成数据计算，属性和方法的运算，watch、event 事件回调的配置
   • 可调用 methods 中的方法，可以访问和修改 data 中的数据触发响应式渲染 DOM
   • 可以通过 computed 和 watch 完成数据计算
   • 此时，vue 实例还未被创建

3. created ==> beforeMount

   • 判断是否存在 el 选项，不存在则停止编译，直到调用 vm.$mount(el)才会继续编译
   • 优先级：render > template > outerHTML
   • vm.el 获取到的是挂载 DOM 的容器

4. brforeMount 组件挂载之前

   • 此阶段可以获取到 vm.el
   • 此阶段 vm.el 虽然完成 DOM 的初始化，但尚未挂载到 el 选项上

5. beforeMount ==> mounted

   • 此阶段 vm.el 完成挂载，vm.$el 生成的 DOM 替换了 el 选项对应的 DOM

6. mounted 组件挂载完成

   • vm.el 已完成 DOM 的挂载和渲染，此刻打印 vm.$el，发现之前的挂载点及内容已被替换成新的 DOM

7. beforeUpdate 组件更新前

   • 更新的数据必须是被渲染到模板上的(el、template、render 之一)，才会触发
   • 此时 view 层还未更新
   • 在该阶段内多次修改数据，只会触发一次。

8. update 组件更新完成

   • 完成 view 层的更新
   • 在该阶段修改数据，会再次触发 beforeUpdate 和 update 生命钩子

9. beforeDestroy 组件销毁前

   • 此时，实例属性和方法仍可访问

10. destroyed 组件销毁完成

    • 实例已被销毁。
    • 可清理它与其他实例的连接，以及解绑该实例身上的全部指令和事件监听
    • 并不能清除 DOM,只能销毁实例

三、各生命周期钩子的使用场景

1. beforeCreate

   • 通常用于插件开发中执行一些初始化任务

2. created

   • 组件初始化完毕，各种数据可以使用，常用于异步数据获取

3. beforeMount

   • 未执行渲染、更新，dom 未创建

4. mounted

   • 初始化结束，dom 已创建，可用于获取访问数据和 dom 元素

5. beforeUpdate

   • 更新前，可用于获取更新前各种状态

6. updated

   • 更新后，所有状态已是最新

7. beforeDestroy

   • 销毁前，可用于一些定时器或订阅的取消

8. destroyed

   • 销毁前，可用于一些定时器或订阅的取消

四、数据请求在 created 和 mouted 的区别

1. create 是在组件实例创建完成时调用，mounted 是在组件挂载完成时调用，触发时间上 create 比 mounted 要更早
2. 相同点: 都能拿到实例对象的属性和方法
3. 不同点：

   • 在 mounted 中请求数据，可能导致页面闪动，因为此时页面 DOM 已完成加载，请求的数据如果需要渲染到页面的话，会再次触发加载工作，导致页面闪动。但如果在页面加载完成前请求数据，则不会。
   • 建议请求对页面有改动的数据时，将其放在 create 生命钩子中执行。