vue3 生命周期函数使用

Vue 3引入了一些新的生命周期函数，并且对一些旧的生命周期函数进行了调整和重命名。下面是Vue 3中常用的生命周期函数及其使用方法：

1. `beforeCreate`：在实例初始化之后，数据观测和事件配置之前被调用。在这个阶段，实例的属性和方法还未被初始化。

   beforeCreate() {
     // 在这里无法访问到 data、methods 等属性
   }

2. `created`：实例创建完成后被调用。在这个阶段，可以访问到 data、methods 等属性。

   created() {
     // 可以访问到 data、methods 等属性
   }

3. `beforeMount`：在挂载开始之前被调用。在这个阶段，模板编译已完成，但尚未将挂载的元素替换为实例的模板。

   beforeMount() {
     // 模板已编译完成，但尚未挂载
   }

4. `mounted`：在挂载完成后被调用。在这个阶段，实例已经挂载到DOM上，可以访问到DOM节点。

   mounted() {
     // 实例已经挂载到DOM上
   }

5. `beforeUpdate`：在数据更新之前被调用，发生在虚拟DOM重新渲染之前。

   beforeUpdate() {
     // 数据更新前的操作
   }

6. `updated`：在数据更新完成后被调用，发生在虚拟DOM重新渲染之后。

   updated() {
     // 数据更新后的操作
   }

7. `beforeUnmount`：在卸载组件之前被调用。

   beforeUnmount() {
     // 组件卸载前的操作
   }

8. `unmounted`：在卸载组件之后被调用。

   unmounted() {
     // 组件卸载后的操作
   }

这些是Vue 3中常用的生命周期函数，通过在组件中定义这些函数，可以在不同的阶段执行相应的操作。请注意，在Vue 3中已经移除了一些旧的生命周期函数，比如`beforeDestroy`和`destroyed`，可以使用`beforeUnmount`和`unmounted`来替代。