vue的生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程。Vue 提供了一系列生命周期钩子（或称为生命周期方法），允许我们在不同阶段添加自己的代码。以下是 Vue 组件的主要生命周期钩子：
1. **创建阶段（Creation）:**
   - `beforeCreate`: 在实例初始化之后、数据观察和事件/侦听器的设置之前被调用。
   - `created`: 在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算，`watch/event` 事件回调已设置，但是挂载阶段尚未开始。
2. **挂载阶段（Mounting）:**
   - `beforeMount`: 在挂载开始之前被调用，相关的 `render` 函数首次被调用。
   - `mounted`: 在 `el` 被新创建的 `vm.$el` 替换，并挂载到实例上去之后调用该钩子。如果 `root` 实例挂载了一个文档内元素，当 `mounted` 被调用时 `vm.$el` 也在文档内。
3. **更新阶段（Update）:**
   - `beforeUpdate`: 数据更新时调用，发生在虚拟 DOM 打补丁之前。适用于在现有 DOM 应用更改之前访问它。
   - `updated`: 在由于数据变更导致的虚拟 DOM 重新渲染和打补丁之后调用。当这个钩子被调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。
4. **卸载阶段（Unmounting）:**
   - `beforeDestroy`: 在实例销毁之前调用。实例仍然完全可用，这是你解绑订阅、监听器和取消 Vue 实例之间的事件通信的好时机。
   - `destroyed`: 在实例销毁之后调用。调用此钩子时，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
此外，Vue 3 还引入了一个新的生命周期钩子 `renderTracked` 和 `renderTriggered`，这两个钩子用于调试目的，它们会在响应式依赖被追踪或触发时调用。
在开发 Vue 组件时，理解生命周期钩子非常重要，因为它们提供了在不同阶段执行代码的时机。例如，你可能会在 `created` 钩子中发起数据请求，在 `mounted` 钩子中访问到 DOM 元素，在 `beforeDestroy` 钩子中进行清理操作。正确使用生命周期钩子可以确保组件的行为符合预期，并且能够更好地管理资源和性能。