vue3生命周期 两种写法

Vue 3 的生命周期有两种不同的写法：Options API 和 Composition API。

1. Options API：这是 Vue 2.x 中常用的写法，通过在组件选项中定义生命周期钩子函数来实现。常见的生命周期钩子函数包括 `beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount` 和 `unmounted` 等。

示例代码如下：

export default {
  beforeCreate() {
    // 组件实例刚刚被创建，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
  },
  created() {
    // 组件实例已经完全创建，数据观测 (data observer) 和 event/watcher 事件配置完成
  },
  beforeMount() {
    // 组件挂载之前被调用，相关的 render 函数首次被调用
  },
  mounted() {
    // 组件挂载完成后被调用，此时 DOM 已经渲染完毕
  },
  beforeUpdate() {
    // 组件更新之前被调用，发生在虚拟 DOM 打补丁之前
  },
  updated() {
    // 组件更新完成后被调用，此时 DOM 已经重新渲染
  },
  beforeUnmount() {
    // 实例销毁之前调用，在这一步，实例仍然完全可用
  },
  unmounted() {
    // 组件销毁后调用，此时实例完全被销毁
  }
}

2. Composition API：这是 Vue 3 中引入的新特性，可以更灵活地组织组件逻辑。使用 Composition API，我们可以使用 `setup` 函数来定义生命周期钩子函数。

示例代码如下：

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // 组件挂载之前被调用
    })

    onMounted(() => {
      // 组件挂载完成后被调用
    })

    onBeforeUpdate(() => {
      // 组件更新之前被调用
    })

    onUpdated(() => {
      // 组件更新完成后被调用
    })

    onBeforeUnmount(() => {
      // 实例销毁之前调用，在这一步，实例仍然完全可用
    })

    onUnmounted(() => {
      // 组件销毁后调用，此时实例完全被销毁
    })
  }
}

这是 Vue 3 中两种常用的生命周期写法。可以根据实际需求选择合适的写法。