Vue3 生命周期
- [1. 理解什么是生命周期（组件的创建、挂载、更新和销毁过程）](#1. 理解什么是生命周期（组件的创建、挂载、更新和销毁过程）)
- [2. 快速入门（onMounted 的使用）](#2. 快速入门（onMounted 的使用）)
- [3. Vue3 生命周期钩子（目前共12个）](#3. Vue3 生命周期钩子（目前共12个）)
- [4. 和 Vue2 生命周期的区别](#4. 和 Vue2 生命周期的区别)
-
- [4.1 Vue2 的主要生命周期](#4.1 Vue2 的主要生命周期)
- [4.2 Vue3 的主要生命周期（对比Vue2）](#4.2 Vue3 的主要生命周期（对比Vue2）)
1. 理解什么是生命周期（组件的创建、挂载、更新和销毁过程）
生命周期就是组件从创建到销毁的所经历的一系列过程。
这个过程中，设置了一些时间点，在这些时间点，开发者可设置一些函数进行事件处理（其实大部分就是业务逻辑代码）。而这些函数就被称为生命周期钩子。
Vue3 的生命周期，如图：
2. 快速入门（onMounted 的使用）
其实对于初学者而言，可以先不必掌握每一个生命周期，只要先了解最常用的 mounted 即可，对应的钩子函数为 onMounted。
因为该钩子函数会在完成了初始化渲染并且创建和插入了 DOM 节点之后被触发，这意味着在当前的这个时间节点，你是可以访问真实的 DOM 元素的。
示例代码：
javascript
<template>
<div>
<h1>用户列表</h1>
<ul v-if="!loading">
<li v-for="(user, index) in users" :key="index">{{ user.name }} - {{ user.email }}</li>
</ul>
<div v-if="loading">加载中...</div>
<div v-if="error">出错啦！</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const users = ref([])
const loading = ref(false)
const error = ref(null)
onMounted(async () => {
// 一般来讲，我们会在此生命周期钩子方法中请求数据
loading.value = true
try {
const res = await fetch('https://jsonplaceholder.typicode.com/users')
if (res.ok) {
users.value = await res.json()
} else {
throw new Error('请求失败')
}
} catch (err) {
error.value = err.message
} finally {
// 无论是出错也好，还是正常请求到了数据，都需要将 loading 状态改为 false
loading.value = false
}
})
</script>
<style scoped></style>3. Vue3 生命周期钩子（目前共12个）
详情请查看官网 组合式 API：生命周期钩子，这里进行简要说明。
比较常用的有
-
onBeforeMount()注册一个钩子，在组件被挂载之前被调用。 -
onMounted()注册一个回调函数，在组件挂载完成后执行。 -
onBeforeUpdate()注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。 -
onUpdated()注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。 -
onBeforeUnmount()注册一个钩子，在组件实例被卸载之前调用。 -
onUnmounted()注册一个回调函数，在组件实例被卸载之后调用。 -
onActivated()注册一个回调函数，若组件实例是 缓存树的一部分，当组件被插入到 DOM 中时调用。 -
onDeactivated()注册一个回调函数，若组件实例是 缓存树的一部分，当组件从 DOM 中被移除时调用。 -
onErrorCaptured()注册一个钩子，在捕获了后代组件传递的错误时调用。 -
onRenderTracked()（Dev only）注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。 -
onRenderTriggered()（Dev only）注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。 -
onServerPrefetch()（SSR only）注册一个异步函数，在组件实例在服务器上被渲染之前调用。
4. 和 Vue2 生命周期的区别
在 Vue.js 中，无论是 Vue 2 还是 Vue 3，生命周期钩子函数的概念和用途大体相同，但它们在实现和细节上有所不同。
如果纯粹只按照组件的创建、挂载、更新、卸载 4个阶段的前后来区分的话，应该可以衍生出8个生命周期及其钩子函数。事实上，Vue2确实也是这么做的。
4.1 Vue2 的主要生命周期
Vue2 的主要生命周期有8个，名称和对应的钩子函数一致。详情建议参考我之前写的一篇《如何理解Vue实例的生命周期》，有 Vue2 生命周期极为详细的说明和实例。
（1）beforeCreate（创建前）
这是遇到的第一个生命周期函数，表示Vue实例完全被创建出来前，会执行它，此时data和methods中的数据都还没初始化。
（2）created（创建后）
data和methods中的数据已经初始化完成可以进行调用。
（3）beforeMount（挂载前）
模板在内存中已经编译完成，但是尚未渲染到页面中，此时页面中的元素还未替换，只是之前写的一些模板字符。
（4）mounted（挂载后）
内存中的模板已经完全渲染到页面中，模板字符在页面中被替换成真正对应的变量。
（5）beforeUpdate（更新前）
data 中的数据发生改变，页面中的显示数据还是旧的，此时data数据是最新的，页面还未和数据保持同步。
（6）updated（更新后）
页面和data数据已经保持同步了，都是最新的。
（7）beforeDestroy（销毁前）
Vue实例已经从运行阶段进入到了销毁阶段。此时Vue实例上所有的data和所有的methods，以及过滤器、指令等都还处于可用状态，此时还没有真正执行销毁的过程。
（8）destroyed（销毁后）
组件已经完全销毁了；此时Vue实例上所有的data和所有的methods，以及过滤器、指令等都已经不可用了。
4.2 Vue3 的主要生命周期（对比Vue2）
（1）setup（组合时API的入口，在beforeCreate之前）
（2）beforeCreate（技术上存在，但弃用）
（3）created（技术上存在，但弃用）
（4）beforeMount（没变化）
（5）mounted（没变化）
（6）beforeUpdate（没变化）
（7）updated（没变化）
（8）beforeUnmount（对应 beforeDestroy）
（9）unmounted（对应destroyed）
主要差异点：
（1）Composition API : Vue 3 通过引入 Composition API ，推荐使用 setup() 函数替代了 beforeCreate 和 created（虽然在技术上 beforeCreate 和 created 在 Vue 3 中仍然存在，但官方推荐使用 setup()）。setup() 在 beforeCreate 和 created 之前被调用。
（2）新增周期 : Vue 3 新增了 beforeUnmount 和 unmounted，这两个钩子分别替代了 Vue 2 中的 beforeDestroy 和 destroyed。更加清晰地对应之前的 beforeMount 和 mounted 两个生命周期。
（3）除了 setup，Vue3 的生命周期钩子，都在前面加了on，用于区别 Vue2的生命周期钩子。
（4）性能优化: Vue 3 对生命周期钩子的实现进行了优化，以提高性能和响应性。例如，通过使用更高效的依赖追踪系统。
总的来说，Vue 3 在保持大部分生命周期钩子的同时，通过引入 Composition API 和一些新的生命周期钩子来改进和扩展了其功能。开发者可以根据自己的项目需求和偏好选择使用选项式 API 或 Composition API 来开发应用。
上一章 《Vue3 模板引用------ref》
下一章 《Vue3 组件注册》