vue3 中的生命周期

在Vue3中，组件的生命循环是指从创建、挂载、运行直至卸载过程中一系列预设的事件。Vue3简化了生命周期钩子，但仍保留了大部分核心功能。以下是Vue3组件的主要生命周期阶段：

1. **创建（Created）**：当组件实例创建完成但尚未渲染到真实DOM时，`setup()`函数会被调用（如果使用`<script setup>`）。在这个阶段，你可以初始化计算属性和数据，但不能修改已绑定的数据。

2. **渲染前（Rendered）**：对于使用template和`<script setup>`的情况，此阶段不存在；对于使用传统的`<script component>`，在首次渲染之前调用`onBeforeMount`钩子。

3. **挂载（Mounted）**：组件已经被附加到了DOM上，并且完成了所有依赖收集。此时可以执行副作用操作，比如设置定时器、订阅事件等。`mounted()`钩子在这里被调用。

4. **渲染（Rendered）**：在`mounted()`之后，组件开始响应数据变化并重新渲染。对于`<script setup>`，Vue会自动处理更新。

5. **更新（Updated）**：组件接收到新的props、state或其他变更后的数据。`onUpdate`钩子仅在组件实例更新时调用，用于处理更新后的状态。

6. **卸载（Unmounted）**：组件即将被移除或销毁时，Vue会执行`beforeDestroy`钩子。然后清理所有的资源，如取消订阅的事件监听器和清除定时器。`destroyed()`钩子在资源完全释放后调用。

需要注意的是，Vue3引入了一些新概念，例如`ref`、`reactive`和`watch`代替了`data`、`computed`和`watcher`，这些都改变了生命周期的行为。