Vue3生命周期钩子详解：从创建到销毁的全过程

张开发
• 2026/4/16 14:25:50 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Vue3生命周期钩子详解：从创建到销毁的全过程
Vue3 生命周期Vue3 的生命周期钩子函数与 Vue2 有所不同主要通过 Composition API 的方式使用。以下是 Vue3 的主要生命周期钩子及其用途beforeCreate在实例初始化之后、数据观测和事件配置之前被调用。此时组件的选项还未被处理data和methods等不可用。created在实例创建完成后被调用。此时已完成数据观测、属性和方法的运算但尚未挂载到 DOM 上。可以访问data和methods但无法操作 DOM。beforeMount在挂载开始之前被调用。此时模板已编译完成但尚未将生成的 DOM 替换到页面上。mounted在实例挂载到 DOM 后被调用。此时可以操作 DOM但需要注意子组件可能还未挂载完成。beforeUpdate在数据更新导致虚拟 DOM 重新渲染之前被调用。可以在更新前访问现有的 DOM。updated在数据更新导致虚拟 DOM 重新渲染和打补丁后被调用。可以操作更新后的 DOM但需避免在此钩子中修改状态以免导致无限循环。beforeUnmount在实例卸载之前被调用。此时实例仍然完全可用适合进行清理工作。unmounted在实例卸载后被调用。此时所有指令和事件监听器已被移除子实例也被销毁。errorCaptured在捕获到后代组件错误时被调用。可以返回false阻止错误继续向上传播。使用示例以下是在 Vue3 中使用生命周期钩子的示例代码import{onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted}fromvue;exportdefault{setup(){onBeforeMount((){console.log(beforeMount);});onMounted((){console.log(mounted);});onBeforeUpdate((){console.log(beforeUpdate);});onUpdated((){console.log(updated);});onBeforeUnmount((){console.log(beforeUnmount);});onUnmounted((){console.log(unmounted);});}};注意事项Vue3 的生命周期钩子可以通过setup函数中的组合式 API 使用。使用onBeforeMount和onMounted等函数替代 Vue2 的beforeMount和mounted。避免在updated钩子中修改响应式数据以免引发无限循环。清理定时器或事件监听器应在onBeforeUnmount或onUnmounted中进行。

更多文章