vue-生命周期

Vue 的生命周期是指 Vue 实例从创建到销毁期间经历的一系列阶段。每个阶段都有相应的钩子函数（Lifecycle Hooks），允许开发者在这些关键时刻执行自定义逻辑。

一、钩子函数

1. 创建阶段

1. beforeCreate

   • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
   • 此时，this.$el 还没有挂载，data 和 methods 都不可用。

2. created

   • 在实例创建完成后立即调用。此时完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
   • 适合进行一些初始的数据获取操作，如发送网络请求（API调用）来填充数据。

2. 挂载阶段

1. beforeMount

   • 在挂载开始之前被调用：相关的 render 函数首次被调用。
   • 此时模板编译尚未完成，但你可以访问到最终的 $el，它还存在于虚拟 DOM 中，未真正插入到文档中。

2. mounted

   • 当挂载完成后被调用，意味着组件已经生成了真实的 DOM 并插入到了页面中。
   • 此时可以访问到真实 DOM 节点，适合进行需要操作 DOM 的初始化工作，比如第三方插件初始化等。
   • 如果需要确保所有子组件也已挂载完毕，可以通过 nextTick() 方法。

3. 更新阶段

1. beforeUpdate

   • 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，例如手动移除添加的事件监听器。

2. updated

   • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   • 当在这个钩子中修改状态时，可能会导致无限更新循环，因此应谨慎使用。

4. 销毁阶段

1. beforeDestroy

   • 实例销毁之前调用。在这一步，实例仍然完全可用。
   • 可以在这里清理定时器、取消事件监听或取消网络请求等，以避免内存泄漏。

2. destroyed

   • Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

二、发送请求的最佳时机

一般来说，发送网络请求的最佳时机是在 created 或 mounted 钩子中。如果你的数据获取不依赖于DOM，那么可以在 created 钩子中进行，因为这时候组件还未挂载，不会触发不必要的重绘和回流，性能较好。如果需要在数据获取完成后对DOM进行操作，则应该选择 mounted 钩子。

需要注意的是，如果你在一个异步操作（如发送网络请求）完成后想要确保视图已经更新，你可以使用 this.$nextTick(callback) 来保证回调函数在DOM更新周期结束后执行。