vue3 生命周期用法

Vue3 的生命周期可以分为三个主要阶段：挂载（ Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有特定的钩子函数用于在相应时刻执行一些操作：

1. **挂载阶段**：
- `beforeCreate()`：实例创建完成但属性还未初始化。
- `created()`：数据已经初始化完成，此时组件开始响应数据变化。
- `beforeMount()`：模板渲染之前，此时DOM尚未插入到文档中。
- `mounted()`：模板已渲染完毕并插入到文档中，数据和DOM都可用。

2. **更新阶段**：
- `beforeUpdate()`：组件接收到新的props或state，但DOM还没有改变。
- `updated()`：组件已完成更新，这发生在 DOM 更新之后。

3. **销毁阶段**：
- `beforeDestroy()`：组件将被卸载前，这个阶段可以执行清理工作。
- `destroyed()`：组件已经被完全卸载，无法访问DOM元素和数据。

这些生命周期钩子允许开发者在各个阶段执行特定的操作，比如数据设置、事件绑定、状态管理和资源解绑等。注意，某些钩子在运行时条件不满足时不会被调用，如`beforeDestroy`如果组件因错误提前终止，它可能不会执行。