2025年vue中常用的生命周期钩子函数（vue3生命周期钩子函数）

科技前沿 • 2025-06-07 22:45 • 阅读 30

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

Vue官网生命周期的描述
在这里插入图片描述
讯享网

1. beforeCreate
创建Vue实例化之前所调用的函数

讯享网

在这里插入图片描述
2. created
实例创建完成，此时可以访问实例中的data的属性和methods中的方法，但不能操作dom。因为页面还未加载成功，页面未显示。

在这里插入图片描述

3. beforeMount
渲染dom之前，加载组件第一次渲染

讯享网

在这里插入图片描述
4. mounted
组件模板已经渲染到指定的el，页面显示，可以操作dom

在这里插入图片描述
5. beforeUpdate
数据更新时执调用

讯享网

在这里插入图片描述
6 .updated
组件更新完成
注意：关于update的钩子函数，都是页面动态渲染有关，每当数据变化时页面更新，都会触发这些钩子，这些钩子的触发频率很高。

在这里插入图片描述
7. beforeDestroy
组件将要销毁
8. destroyed
组件销毁完成。常在该时机移除耗时操作

讯享网

2025年vue中常用的生命周期钩子函数（vue3生命周期钩子函数）

相关推荐