Vue3是Vue.js的最新版本，其生命周期相对于Vue.js 2.x版本有所改变，本文将详细介绍Vue3的各个生命周期，包括其执行顺序、作用、使用方法以及配合代码案例
一、beforeCreate
beforeCreate钩子函数是在Vue3实例被创建之初执行的，此时Vue3实例中的数据和方法都还未初始化，因此在beforeCreate中无法访问到组件的data、computed、methods等属性。
下面是一个beforeCreate的简单使用示例：
<script> export default { beforeCreate() { console.log('before create hook') } } </script>
在控制台输出'before create hook'。
二、created
created钩子函数是在Vue3实例被创建后立即执行的，此时Vue3实例中的数据已经被初始化，但是模板还未生成，因此在created中无法访问到组件的DOM节点。
下面是一个created的简单使用示例：
<script> export default { created() { console.log('created hook') } } </script>
在控制台输出'created hook'。
三、beforeMount
beforeMount钩子函数在Vue3实例的模板挂载到真实DOM之前执行，此时Vue3实例已经将数据和模板联系起来，但是还未生成DOM节点，可以在此时修改数据，这样修改后的数据会在真实DOM生成后立即呈现出来。
下面是一个beforeMount的简单使用示例：
<template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'before mount hook message' } }, beforeMount() { this.message = 'hello world' } } </script>
在真实DOM生成后，页面会显示'hello world'。
四、mounted
mounted钩子函数在Vue3实例的模板已经挂载到真实DOM之后执行，此时Vue3实例已经生成了DOM节点，并将数据绑定到了DOM节点上，此时可以访问组件的DOM节点。
下面是一个mounted的简单使用示例：
<template> <div ref="message">{{ message }}</div> </template> <script> export default { mounted() { console.log(this.$refs.message.innerText) } } </script>
控制台输出组件的innerText。
五、beforeUpdate
beforeUpdate钩子函数在Vue3实例的数据发生改变，但是还未更新DOM节点之前执行，此时可以在beforeUpdate中获取到新的数据和旧的数据，以及修改之前的DOM节点状态。
下面是一个beforeUpdate的简单使用示例：
<template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'before update hook message' } }, methods: { changeMessage() { this.message = 'hello world' } }, beforeUpdate() { console.log(`before update message: ${this.message}`) } } </script>
在调用changeMessage方法之后，控制台会输出'before update message: before update hook message'。
六、updated
updated钩子函数在Vue3实例的数据发生改变并且DOM节点已经更新之后执行，此时可以访问到最新的DOM节点状态。
下面是一个updated的简单使用示例：
<template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'updated hook message' } }, methods: { changeMessage() { this.message = 'hello world' } }, updated() { console.log(`updated message: ${this.message}`) } } </script>
在调用changeMessage方法之后，控制台会输出'updated message: hello world'。
七、beforeUnmount
beforeUnmount钩子函数在Vue3实例被销毁之前执行，此时可以对Vue3实例进行一些清理工作，如清除定时器、取消订阅等操作。
下面是一个beforeUnmount的简单使用示例：
<template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'before unmount hook message' } }, mounted() { setTimeout(() => { this.$el.remove() }, 3000) }, beforeUnmount() { console.log('before unmount') } } </script>
在组件DOM节点从页面中移除之前，控制台会输出'before unmount'。
八、unmounted
unmounted钩子函数在Vue3实例被销毁之后执行，此时Vue3实例已经从内存中移除，可以在此时清除定时器、取消订阅、释放内存等操作。
下面是一个unmounted的简单使用示例：
<template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'unmount hook message' } }, mounted() { setTimeout(() => { this.$el.remove() }, 3000) }, unmounted() { console.log('unmount') } } </script>
