vue-生命周期
Vue 的生命周期是指 Vue 实例从创建到销毁期间经历的一系列阶段。每个阶段都有相应的钩子函数（Lifecycle Hooks），允许开发者在这些关键时刻执行自定义逻辑。
一、钩子函数
1. 创建阶段
-
beforeCreate
- 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- 此时，
this.$el还没有挂载，data和methods都不可用。
-
created
- 在实例创建完成后立即调用。此时完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- 适合进行一些初始的数据获取操作，如发送网络请求（API调用）来填充数据。
2. 挂载阶段
-
beforeMount
- 在挂载开始之前被调用：相关的 render 函数首次被调用。
- 此时模板编译尚未完成，但你可以访问到最终的
$el，它还存在于虚拟 DOM 中，未真正插入到文档中。
-
mounted
- 当挂载完成后被调用，意味着组件已经生成了真实的 DOM 并插入到了页面中。
- 此时可以访问到真实 DOM 节点，适合进行需要操作 DOM 的初始化工作，比如第三方插件初始化等。
- 如果需要确保所有子组件也已挂载完毕，可以通过
nextTick()方法。
3. 更新阶段
-
beforeUpdate
- 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，例如手动移除添加的事件监听器。
-
updated
- 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
- 当在这个钩子中修改状态时，可能会导致无限更新循环，因此应谨慎使用。
4. 销毁阶段
-
beforeDestroy
- 实例销毁之前调用。在这一步，实例仍然完全可用。
- 可以在这里清理定时器、取消事件监听或取消网络请求等，以避免内存泄漏。
-
destroyed
- Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
二、发送请求的最佳时机
一般来说，发送网络请求的最佳时机是在 created 或 mounted 钩子中。如果你的数据获取不依赖于DOM，那么可以在 created 钩子中进行，因为这时候组件还未挂载，不会触发不必要的重绘和回流，性能较好。如果需要在数据获取完成后对DOM进行操作，则应该选择 mounted 钩子。
需要注意的是，如果你在一个异步操作（如发送网络请求）完成后想要确保视图已经更新，你可以使用 this.$nextTick(callback) 来保证回调函数在DOM更新周期结束后执行。
原文地址：https://blog.csdn.net/2301_79814793/article/details/144374620
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！