Vue的生命周期(11个)钩子函数

Vue的生命周期(11个)钩子函数

初始生命周期
(一)Vue生命周期
在这里插入图片描述

(二)Vue生命周期

1、beforeCreate(创建前):在此生命周期函数执行的时候,data和methods中的数据都还没有初始化。
2、created(创建后):在此生命周期函数中,data和methods都已经被初始化好了,如果要调用 methods中的方法,或者操作data中的数 据,最早只能在created中操作。
3、beforeMount(载入前):在此生命周期函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时页面还是旧的。
4、mounted(载入后):此时页面和内存中都是最新的数据,这个钩子函数是最早可以操作dom节点的方法。
5、beforeUpdate(更新前):此时页面中显示的数据还是旧的,但是data中的数据是最新的,且页面并未和最新的数据同步。
6、Updated(更新后):此时页面显示数据和最新的data数据同步。
7、beforeDestroy(销毁前):当执行该生命周期函数的时候,实例身上所有的data,所有的methods以及过滤器…等都处于可用状态,并没有真正执行销毁。
8、destroyed(销毁后):此时组件以及被完全销毁,实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。
(三)生命周期(其他三个钩子函数)
下面两个钩子函数一般配合使用
9、activated(组件激活时):和上面的beforeDestroy和destroyed用法差不多,但是如果我们需要一个实例,在销毁后再次出现的话,用 beforeDestroy和destroyed的话,就太浪费性能了。实例被激活时使用,用于重复激活一个实例的时候
10、deactivated(组件未激活时):实例没有被激活时。
11、errorCaptured(错误调用):当捕获一个来自后代组件的错误时被调用

  • 14
    点赞
  • 98
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue生命周期中,一共有11钩子函数。这些钩子函数用于在不同的阶段执行一些操作,以便我们可以在组件的生命周期中进行一些自定义操作,例如处理数据、向服务器发出请求、添加/删除事件等。 1. beforeCreate:在实例被创建之前,此钩子函数被调用。此时,组件的局部状态和事件还未被初始化,实例身上的属性和方法也不可用。 2. created:在实例被创建之后,此钩子函数被调用。此时,组件的局部状态和事件已经被初始化,但DOM元素还没有被挂载到页面上。 3. beforeMount:在实例挂载到页面之前,此钩子函数被调用。此时,组件的DOM元素已经在内存中生成,但还没有添加到页面上。 4. mounted:在实例挂载到页面之后,此钩子函数被调用。此时,组件的DOM元素已经添加到了页面中,并且可以与用户进行交互。 5. beforeUpdate:在Vue实例更新之前,此钩子函数被调用。此时,组件的数据已经更新,但视图还没有更新。 6. updated:在Vue实例更新之后,此钩子函数被调用。此时,组件的数据和视图都已经更新完毕。 7. beforeDestroy:在Vue实例销毁之前,此钩子函数被调用。此时,组件的实例还未被销毁,但是它的数据和事件已经被卸载。 8. destroyed:在Vue实例销毁之后,此钩子函数被调用。此时,组件的实例和内存中的DOM元素,事件和监听器都已经被销毁,无法访问。 9. activated:在使用<keep-alive>的组件被激活时调用,会传递缓存的组件实例。 10. deactivated:在使用<keep-alive>的组件被停用时调用,会传递缓存的组件实例。 11. errorCaptured:当子组件产生错误时,此钩子函数会被调用。错误会向上冒泡至全局错误处理器。 以上是Vue生命周期中的11钩子函数,开发者可根据需要在不同的阶段来进行个性化操作,以达到更好的组件效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值