vue中钩子函数有哪些
最新回答
红眼兔兔
2026-10-22 12:42:40
Vue.js 提供了多种钩子函数，允许开发者在组件生命周期的不同阶段插入自定义逻辑。以下是详细的分类和说明：
一、生命周期钩子这些钩子函数在组件生命周期的关键阶段触发，用于执行初始化、DOM 操作或资源清理等任务。
创建阶段
beforeCreate()在实例初始化之后、数据观测和事件配置之前调用。此时 data 和 methods 尚未初始化。
created()实例创建完成后调用，此时已完成数据观测，但尚未挂载 DOM。常用于异步请求数据。
挂载阶段
beforeMount()在挂载开始之前调用，模板已编译但尚未渲染到 DOM。
mounted()实例挂载到 DOM 后调用，适合操作 DOM 或初始化第三方库（如地图、图表）。
更新阶段
beforeUpdate()数据变化导致虚拟 DOM 重新渲染前触发，可用于获取更新前的 DOM 状态。
updated()虚拟 DOM 重新渲染并应用到实际 DOM 后触发，避免在此修改数据以防止无限循环。
销毁阶段
beforeDestroy()实例销毁前调用，适合清除定时器、取消事件监听等清理工作。
destroyed()实例销毁后调用，所有指令和事件监听器被移除。
- render()定义组件的渲染逻辑，通常在选项式 API 中使用。
- renderTracked()跟踪虚拟 DOM 重新渲染时依赖的响应式变量（用于调试）。
- renderTriggered()触发虚拟 DOM 重新渲染时调用，显示触发渲染的具体变量（用于调试）。
- errorCaptured()捕获子孙组件的错误，返回 false 可阻止错误继续向上传播。适合全局错误处理。
- activated()被 <keep-alive> 缓存的组件激活时调用。
- deactivated()被 <keep-alive> 缓存的组件停用时调用。
- serverPrefetch()仅在服务端渲染（SSR）时调用，用于预取数据。
选项式 API
export default { beforeCreate() { /* ... */ }, mounted() { /* 操作 DOM */ }};组合式 API（Vue 3）通过 setup() 和生命周期函数（需从 vue 导入）：
import { onMounted, onUnmounted } from 'vue';export default { setup() { onMounted(() => { console.log('组件已挂载'); }); }};
- 数据初始化：在 created() 或 setup() 中请求 API。
- DOM 操作：在 mounted() 中访问 DOM 元素。
- 性能优化：在 beforeDestroy() 中移除事件监听，避免内存泄漏。
- 调试渲染：通过 renderTracked 跟踪不必要的更新。
通过合理使用钩子函数，可以精准控制组件行为，提升应用的可维护性和性能。
热门标签
