vue钩子函数

最新推荐文章于 2025-07-26 10:33:00 发布

原创最新推荐文章于 2025-07-26 10:33:00 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue实例从创建到销毁的过程称为生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等关键钩子函数。这些钩子在不同阶段提供介入点，允许开发者在数据变化、模板渲染和实例销毁时执行自定义操作。了解和利用这些生命周期钩子，可以有效管理组件状态和执行特定任务。

什么是vue的生命周期

vue实例在创建到销毁经过的一系列过程叫做生命周期

什么是生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
在生命周期中被自动调用的函数叫做生命周期钩子（钩子函数）

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

实例被挂载后调用

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated

数据更新完成调用

beforeDestroy

实例销毁之前调用

destroyed

实例销毁后调用。该钩子被调用后，对应Vue实例的所有指令都被解绑，所有的事件监听器都被移除，所有的子实例都被销毁

          beforeCreate(){
                console.log("实例初始化之后")
            },
            created(){
                console.log("实例创建ok")
            },
            beforeMount(){
                console.log("开始创建模板")
            },
            mounted(){
                console.log("创建模板完成")
            },
            beforeUpdate(){
                console.log("数据更新之前")
            },
            updated(){
                console.log("数据更新完毕")
            },
            beforeDestroy(){
                console.log("实例开始销毁")
            },
            destroyed(){
                console.log("实例销毁完毕")
            }

                                          生命周期图

在这里插入图片描述