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

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

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

  1. beforeCreate这是第一个生命周期函数,表示实例初始化之后,完全创建出来之前,它刚初始化一个Vue空的实例对象,这个时候对象身上只有一些默认的事件和生命周期函数,data和methods中数据都还不能被访问到
  2. created在实例创建完成之后被立即调用,这时候data和methods中的数据都已经可以被访问和参与运算,不过挂载阶段还没开始,$el属性还不可见
  3. beforeMount这时候第三个生命周期函数,在挂载之前被调用,表示模板已经在内存中生成了,不过还没把模板渲染到页面当中去
  4. 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 以阻止该错误继续向上传播。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值