在 Vue 3中，一些常见的钩子函数发生了变化。例如，vue2中的created和beforeCreate钩子函数被替换为了setup()，并且setup()在二者之前执行。beforeMount和mounted函数被替换成了onBeforeMount和onMounted。beforeUpdate 和update被替换为 onBeforeUpdate和onupdate。beforeDestroy和destroyed被替换为beforeUnmount和unmounted。这些钩子函数的执行顺序与Vue2的版本相同，但是有所不同的是，在Vue3中，它们是使用ES6类定义的。
一、Vue 3 中的生命周期
1、setup() : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
2、onBeforeMount() : 组件挂载到节点上之前执行的函数；
3、onMounted() : 组件挂载完成后执行的函数；
4、onBeforeUpdate(): 组件更新之前执行的函数；
5、onUpdated(): 组件更新完成之后执行的函数；
6、onBeforeUnmount(): 组件卸载之前执行的函数；
7、onUnmounted(): 组件卸载完成后执行的函数；
8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
二、Vue 2.X 和 Vue 3.X 对比
vue2 -------> vue3
beforeCreate --------> setup(()=>{})
created --------> setup(()=>{})
beforeMount --------> onBeforeMount(()=>{})
mounted --------> onMounted(()=>{})
beforeUpdate --------> onBeforeUpdate(()=>{})
updated --------> onUpdated(()=>{})
beforeDestroy --------> onBeforeUnmount(()=>{})
destroyed --------> onUnmounted(()=>{})
activated --------> onActivated(()=>{})
deactivated --------> onDeactivated(()=>{})
errorCaptured --------> onErrorCaptured(()=>{})
三、setup
setup 函数是一个全新的组件选项。它是 Composition API 的核心，用于初始化组件实例。
setup 函数接收两个参数：props 和 context。其中 props 是父组件传递给当前组件实例的属性，而 context 则包含了一些 helper 方法和组件选项（如 attrs、slots 和 emit 等）。
在 setup 中，我们可以使用 Vue 3 提供的多个工具函数来定义响应式数据、监听生命周期钩子、处理计算属性、声明事件处理函数等。这些函数包括：
reactive：用于创建响应式对象
ref：用于创建一个单一的响应式值
computed：用于创建计算属性
watch：用于监听响应式数据的变化
onMounted、onUpdated 和 onUnmounted：用于监听生命周期钩子
toRefs：用于将响应式对象转换为普通对象
inject 和 provide：用于跨层级组件传递数据
getCurrentInstance：用于访问当前组件实例
使用 setup 函数的优点是可以将相似的逻辑组织在一起，便于代码的维护和重用。此外，setup 函数需要返回一个对象，用于暴露组件状态和方法给模板使用，因此也提高了代码的可读性和组件的封装性。
export default {
setup(props, context) {
// 透传 Attributes（非响应式的对象，等价于 $attrs）
console.log(context.attrs)
// 插槽（非响应式的对象，等价于 $slots）
console.log(context.slots)
// 触发事件（函数，等价于 $emit）
console.log(context.emit)
// 暴露公共属性（函数）
console.log(context.expose)
}
}
四、onBeforeMount 和 onMounted
onBeforeMount 和 onMounted 是 Vue 3 中的生命周期钩子，它们分别在组件挂载之前和之后运行。下面是两个钩子函数的使用方法：
onBeforeMount
onBeforeMount 钩子函数会在组件挂载到 DOM 前运行，可以用来在组件挂载前执行一些初始化操作。
<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
console.log('Before mount')
})
</script>
在上面的例子中，我们通过 onBeforeMount 钩子注册了一个函数，在组件挂载前输出 'Before mount'。
onMounted
onMounted 钩子函数会在组件挂载到 DOM 后运行，通常用于获取数据和初始化页面状态等操作。
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { onMounted, reactive } from 'vue'
const state = reactive({
message: ''
})
onMounted(() => {
// 发送 AJAX 请求，获取数据
fetch('/api/data')
.then(res => res.json())
.then(data => {
state.message = data.message
})
})
</script>
在上面的例子中，我们通过 onMounted 钩子在组件挂载后发送 AJAX 请求，获取数据并更新组件状态中的 message 字段。
需要注意的是，在 Vue 3 中，onMounted 和 onBeforeMount 钩子需要在 setup 函数中使用。
五、onBeforeUpdate和onUpdated
onBeforeUpdate 和 onUpdated 是 Vue 3 中的生命周期钩子函数，它们分别在组件更新之前和之后运行。下面是两个钩子函数的使用方法：
onBeforeUpdate
onBeforeUpdate 钩子函数会在数据重新渲染之前运行，可以用来在组件更新前执行一些操作。
<script setup>
import { onBeforeUpdate } from 'vue'
let count = 1
onBeforeUpdate(() => {
console.log('Before update', count)
})
const handleClick = () => {
count++
}
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="handleClick">增加</button>
</div>
</template>
在上面的例子中，我们通过 onBeforeUpdate 钩子注册了一个函数，在每次组件更新之前输出计数器的值。同时，在方法中添加了一个按钮点击事件，用于修改计数器的值。
onUpdated
onUpdated 钩子函数会在数据重新渲染后运行，通常用于更新 DOM、执行动画或获取最新的状态等操作。
<template>
<div>
<p>{{ message }}</p>
<button @click="handleClick">获取最新的消息</button>
</div>
</template>
<script setup>
import { onMounted, onUpdated, ref } from 'vue'
const message = ref('Hello, world!')
onMounted(() => {
// 模拟异步获取消息
setTimeout(() => {
message.value = 'Hello, Vue 3!'
}, 2000)
})
onUpdated(() => {
console.log('DOM updated')
})
const handleClick = () => {
alert(message.value)
}
</script>
在上面的例子中，我们通过 onUpdated 钩子在每次数据更新后输出 DOM 更新消息。同时，在方法中添加了一个按钮点击事件，用于显示最新的消息。
需要注意的是，在 Vue 3 中，onBeforeUpdate 和 onUpdated 钩子需要在 setup 函数中使用。
六、onBeforeUnmount和onUnmounted
当组件不再需要时，Vue3将依次执行beforeUnmount和unmounted钩子函数。beforeUnmount钩子函数在组件卸载之前被调用，通常用于清理一些事件监听器或取消一些异步任务。unmounted钩子函数在组件完全被卸载后被调用，此时，组件可以回收内存等资源。
onBeforeUnmount
onBeforeUnmount 钩子函数会在组件卸载之前运行，可以用来清除定时器、取消事件监听器等操作。
<script setup>
import { onBeforeUnmount, ref } from 'vue'
const timer = ref(null)
onBeforeUnmount(() => {
clearInterval(timer.value)
})
const startTimer = () => {
timer.value = setInterval(() => {
console.log('Hello, world!')
}, 1000)
}
const stopTimer = () => {
clearInterval(timer.value)
}
</script>
<template>
<div>
<p>定时器示例</p>
<button @click="startTimer">开始</button>
<button @click="stopTimer">停止</button>
</div>
</template>
在上面的例子中，我们通过 onBeforeUnmount 钩子注册了一个函数，在组件卸载之前清除定时器。同时，在方法中添加了两个按钮事件，用于启动和停止计时器。
onUnmounted
onUnmounted 钩子函数会在组件卸载后运行，通常用于清理一些资源或取消订阅。
<template>
<div>
<p>{{ message }}</p>
<button @click="unsubscribe">取消订阅</button>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
const message = ref('')
let subscription = null
onMounted(() => {
// 模拟创建一个订阅
subscription = setInterval(() => {
message.value = new Date().toLocaleTimeString()
}, 1000)
})
onUnmounted(() => {
// 在组件卸载后取消订阅
clearInterval(subscription)
})
const unsubscribe = () => {
clearInterval(subscription)
}
</script>
在上面的例子中，我们通过 onUnmounted 钩子在组件卸载后清除订阅。同时，在方法中添加了一个按钮点击事件，用于取消订阅。
需要注意的是，在 Vue 3 中，onBeforeUnmount 和 onUnmounted 钩子需要在 setup 函数中使用。
总结
Vue3引入了Composition API、Teleport等新特性，同时也改进了组件生命周期的实现方式，包括钩子函数的命名和顺序的变化。通过了解Vue3中组件生命周期的变化，开发人员可以更好地管理组件的状态、数据以及DOM操作，从而提高Vue3应用程序的性能和可维护性。总之，Vue3中的组件生命周期是一个非常重要的概念。开发人员应该熟悉Vue3的生命周期钩子函数，以便更好地编写和维护Vue3应用程序。
