vue3语法糖和非语法糖各有几个生命周期

### Vue3 中语法糖与非语法糖生命周期钩子的数量对比

#### 非语法糖形式下生命周期钩子数量

在传统的选项式 API 下，Vue 3 组件拥有完整的生命周期钩子集。这些钩子涵盖了从创建到销毁的各个阶段：

- `beforeCreate` 和 `created`: 初始化期间触发
- `beforeMount` 和 `mounted`: DOM 插入前后触发
- `beforeUpdate` 和 `updated`: 数据更新前后的处理
- `beforeDestroy` 和 `destroyed`: 实例销毁周期事件[^1]

因此，在非语法糖的形式下，共有八个标准生命周期钩子。

#### 语法糖形式下生命周期钩子数量

采用 Composition API 及其增强版 setup 语法糖之后，部分传统意义上的生命周期钩子名称发生了变化，并且一些早期初始化相关的钩子被移除或替代。具体来说:

- 移除了 `beforeCreate` 和 `created`, 因为 setup 函数本身就在这两个阶段之间运行[^3]
- 使用带有 on 前缀的新命名方式来表示剩余的主要生命周期钩子，比如 `onMounted`, `onUnmounted` 等等[^2]

这意味着在使用 setup 语法糖的情况下，虽然显示上看起来只有六个显式的生命周期钩子（即去掉两个创建期钩子），但实际上由于 setup 的存在，仍然覆盖了整个组件生命期内的关键时刻点。

// Setup 语法糖内定义生命周期钩子的例子
<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

onMounted(() => {
    console.log('Component has been mounted.')
})
</script>

综上所述，在考虑了 setup 自身的作用后，无论是哪种风格，实际上都支持相同的生命周期控制能力；只是表现形式有所区别而已。