vue生命周期

一.vue生命周期图示
图片来源于vue官网
来源于vue.js官网
二.各个周期函数声明:(资料来源于hm视频)
1.beforeCreate():

实例完全被创建出来之前,会执行它,在beforeCreate()执行的时候,data和methods中的数据都还没有初始化。

2.created():

在created中,data和methods都已经初始化好了,如果要调用methods中的方法/操作data中的数据,最早只能在created中操作

3.beforeMount():

模板已在内存中编辑完成,尚未渲染至页面。 页面中的元素还没有被真正的替换过来,仍为上一个模板的数据。

4.mounted():

内存中的模板已真正的挂载到了页面中,用户已看到渲染好的页面。
mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表示实例已经被完全创建好了,此时如果没有其它操作的话,这个实例就静静的躺在内存中。

5.beforeUpdate():

页面中显示的数据还是旧的,此时data数据是最新的,页面尚未和最新的数据保持同步。

6.update():

页面和data中的数据已经保持同步,都是新的。

7.beforeDestory():

当执行beforeDestory钩子函数的时候,vue实例已经从运行阶段进入到了销毁阶段,实例上所有的data和methods,以及过滤器指令,都处于可用状态,此时还没有真正执行销毁过程

8.destory():

组件已完全销毁
三.汇总
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值