Vue 有哪些生命周期钩子函数？分别有什么用？
2023-09-12 15:05:30
Vue 的生命周期钩子函数分为创建阶段、挂载阶段、更新阶段和销毁阶段，每个阶段提供特定时机执行自定义逻辑。以下是详细分类及作用：
一、创建阶段（Initialization）beforeCreate
触发时机：组件实例初始化后，数据观测（data）和事件配置（methods）之前。
用途：
无法访问 data、methods、computed 等属性。
通常用于非响应式操作（如手动设置全局变量、初始化非响应式数据）。
created
触发时机：组件实例创建完成，数据观测和事件配置已就绪，但 DOM 未挂载。
用途：
可访问 data、methods、computed 等属性。
常用场景：
发送异步请求（如 API 调用）获取初始数据。
初始化第三方库（如设置图表、地图实例）。
beforeMount
触发时机：编译模板生成虚拟 DOM 后，实际 DOM 挂载之前。
用途：
可访问渲染前的虚拟 DOM（通过 this.$el 可能获取到未渲染的 DOM 占位符）。
适用于最后修改数据而不触发额外更新的场景（但通常推荐在 created 中处理）。
mounted
触发时机：组件已挂载到 DOM，可操作真实 DOM。
用途：
核心场景：
操作 DOM（如初始化滚动条、聚焦输入框）。
订阅全局事件（如窗口大小变化 resize）。
集成外部库（如 D3.js、ECharts）。
注意：
避免在此钩子中修改数据，可能导致无限更新循环。
异步操作需处理错误（如网络请求失败）。
beforeUpdate
触发时机：数据变化导致虚拟 DOM 重新渲染前。
用途：
可访问更新前的 DOM 状态（如记录滚动位置）。
适用于在更新前执行逻辑（但通常通过计算属性或 watch 更高效）。
updated
触发时机：组件重新渲染并应用变更后。
用途：
操作更新后的 DOM（如重新绑定事件、调整样式）。
注意：
避免在此钩子中修改状态，可能再次触发更新。
若需响应数据变化，优先使用 watch 或计算属性。
beforeDestroy
触发时机：组件销毁前，实例仍完全可用。
用途：
清理资源：
移除事件监听器（如 window.addEventListener）。
取消定时器（setInterval、setTimeout）。
注销全局事件总线（如 EventBus.$off）。
保存组件状态（如记录用户操作日志）。
destroyed
触发时机：组件已销毁，所有指令和子实例解绑。
用途：
调试或日志记录（如确认组件完全卸载）。
实际开发中较少使用，多数清理在 beforeDestroy 完成。
activated / deactivated（仅保持活动状态组件）
触发时机：组件被 <keep-alive> 缓存时，激活/停用时调用。
用途：
激活时恢复数据（如滚动位置）。
停用时暂停动画或请求。
errorCaptured（错误处理）
触发时机：子组件抛出错误时，父组件可通过此钩子捕获并处理。
用途：全局错误监控或降级 UI 展示。
- 数据请求：优先在 created 中发起，避免 mounted 中因 DOM 未就绪导致的问题。
- DOM 操作：集中在 mounted 中，确保元素存在。
- 性能优化：在 beforeDestroy 中清理资源，防止内存泄漏。
- 避免滥用：更新阶段的钩子（如 updated）慎用，优先通过响应式数据驱动视图。
通过合理利用生命周期钩子，可以精准控制组件行为，提升代码可维护性。
热门标签
