Vue实例的生命周期钩子函数

最新推荐文章于 2025-02-21 11:00:00 发布

原创最新推荐文章于 2025-02-21 11:00:00 发布 · 936 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #生命周期 #钩子函数

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue的生命周期钩子函数。常见的如beforeCreate、created、beforeMount、Mounted等，分别在实例初始化、创建完成、挂载前后等阶段调用。还提到了vm.$nextTick方法，以及其他如beforeUpdate、updated等钩子函数在数据更新、实例销毁等不同场景的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的生命周期钩子函数有11个,不过我们经常用到就几个而已

beforeCreate这是第一个生命周期函数,表示实例初始化之后,完全创建出来之前,它刚初始化一个Vue空的实例对象,这个时候对象身上只有一些默认的事件和生命周期函数,data和methods中数据都还不能被访问到
created在实例创建完成之后被立即调用,这时候data和methods中的数据都已经可以被访问和参与运算,不过挂载阶段还没开始,$el属性还不可见
beforeMount这时候第三个生命周期函数,在挂载之前被调用,表示模板已经在内存中生成了,不过还没把模板渲染到页面当中去
Mounted 表示内存中的模版已经真实被挂载在页面中,用户已经可以看到渲染好的页面了,只要执行完了mounted就表示整个Vue实例已经初始化完毕此时组件已经脱离了创建阶段进入了运行阶段,

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

mounted: function () {
 this.$nextTick(function () {
   // ...
 })
}

这里稍微说下vm.$nextTick 这个方法是2.1.0起新增的,如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的兼容，所以如果你的目标浏览器不是原生支持 Promise ，你得自行兼容。主要作用是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
5. beforeUpdate在数据更新的时候调用该函数,这里适合在更新之前访问现有的DOM元素,执行该函数的话页面中的数据还是很旧的,页面尚未和最新的数据保持同步
6. updated由于数据的更改导致DOM元素重新进行渲染,在这之后会调用该函数,当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。
7. beforeDestroy当执行这个函数的时候实例就已经从运行阶段,进入到销毁阶段了此时,数据还是处于可用状态,并没有真正执行销毁过程
8. destroyed 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
9. activated keep-alive 组件激活时调用。
10.deactivated keep-alive 组件停用时调用。
11. errorCaptured2.5.0+ 新增,当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。