Vue中的生命周期

一、什么是生命周期

在生活中我们从出生、长大、衰老、逝世，这是我们人的一生。那在Vue中也有它的生命周期，这个生命周期指的就是每个Vue组件实例在创建时需要经历的一个过程，划分为组件的创建前后、挂载前后、更新前后、销毁前后（Vue3中更新为了卸载前后）这四个阶段。每个阶段都设置了两个被称为生命周期钩子的函数（共八个），以方便让开发者能够在特定阶段运行自己的代码。

二、生命周期钩子函数

刚刚我们提到主要有八个钩子，那这里我们通过这种方式来区分每个生命周期钩子的特征：
1）获取data中的数据确定组件实例是否创建完成
2）打印虚拟DOM确定虚拟DOM是否解析完成
3）获取根节点的文本内容确定真实DOM是否渲染完成

1、组件实例创建前 beforeCreate

beforeCreate(){
	// 此时组件实例还没有创建好，不能通过 this 获取实例中data的数据
	console.log(this.message)
	// 没有创建虚拟DOM
	console.log(this.$el)
	// 没有挂载到真实DOM
	console.log(document.getElementById('app').innerHTML)
}

• 说明
  在组件实例初始化完成之后立即调用。
• 详细信息
  会在组件初始化完成、props解析之后、data()和computed等选项处理之前立即调用
• 注意
  组合式API中的setup()钩子会在所有选项式API钩子之前调用，beforeCreate()也不例外。

2、组件实例创建完成后 created

created() {
	// 组件实例创建好了，可以拿到data中的数据
	console.log(this.message)
	// 没有创建虚拟DOM
	console.log(this.$el)
	// 没有挂载到真实DOM
	console.log(document.getElementById('app').innerHTML)
}

• 说明
  在组件实例处理完所有与状态相关的选项后调用。
• 详细信息
  当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而此时挂载阶段还未开始，因此$el属性仍不可用

3、组件实例挂载前 beforeMount

beforeMount() {
	// 可以拿到data中的数据
	concole.log(this.message)
	// 此时已经创建好了dom对象，但是还未解析
	console.log(this.$el)
	// 没有挂载到真实DOM
	console.log(document.getElementById('app').innerHTML)
}

• 说明
  在组件被挂载之前调用
• 详细信息
  当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
• 注意
  这个钩子在服务端渲染时不会调用

4、组件实例挂载后 mounted

mounted() {
	// 可以拿到data中的数据
	console.log(this.msg)
	// 虚拟DOM创建好了，并解析完成
	console.log(this.$el)
	// 挂载到了真实DOM
	console.log(document.getElementById('app').innerHTML)
}

• 说明
  在组件被挂载之后调用。
• 详细信息
  组件在以下情况下被视为已挂载：
  1）所有同步子组件都已经被挂载。(不包含异步组件或树内的组件）
  2）其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
  这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
• 注意
  这个钩子在服务端渲染时不会被调用。
• PS
  理论上在beforeCreate这个钩子函数之后的created、beforeMount、mounted都可以进行请求数据的操作，但是因为只有mounted这个阶段实例、虚拟DOM、真实DOM都准备完成了，所以请求数据时通常在mounted这个钩子函数中进行，这是因为此时组件实例已经挂载到了真实DOM并且已经解析完成

5、组件更新前 beforeUpdate

// 更新的时候才会触发
beforeUpdate() {
	// 虚拟DOM已经解析编译了模板
	console.log(this.$el)
	// 还没有更新到真实DOM
	console.log(document.getElementById('app').innerHTML)
}

• 说明
  在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
• 详细信息
  这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
• 注意
  这个钩子在服务端渲染时不会被调用。

6、组件更新后 updated

updated() {
	// 虚拟DOM已经解析编译了模板
	console.log(this.$el)
	// 也已经更新到了真实DOM
	console.log(document.getElementById('app').innerHTML)
}

• 说明
  在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
• 详细信息
  父组件的更新钩子将在其子组件的更新钩子之后调用。
  这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
• 注意
  这个钩子在服务端渲染时不会被调用。

7、组件实例被卸载前 beforeUnmount

// 在这个阶段通常用来清除当前组件的一些副作用
// 一个很简单的例子，用来清空前面钩子函数中设置的定时器，释放内存
clearInterval(this.timer)

• 说明
  在一个组件实例被卸载之前调用。
• 详细信息
  当这个钩子被调用时，组件实例依然还保有全部的功能。
• 注意
  当这个钩子被调用时，组件实例依然还保有全部的功能。

8、组件实例被卸载后 unmounted

// 销毁后，vue的相关特性就失效

• 说明
  在一个组件实例被卸载之后调用。
• 详细信息
  一个组件在以下情况下被视为已卸载：
  1）其所有子组件都已经被卸载。
  2）所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
  可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。
• 注意
  这个钩子在服务端渲染时不会被调用。

9、动态组件提供的两个生命周期钩子

activated

这个钩子在组件显示时触发

deactivated

这个钩子在组件隐藏时触发

三、生命周期图示

四、官网Vue3文档生命周期链接

点击跳转到官网Vue3文档生命周期图示
链接地址：https://cn.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram