VUE中的生命周期、每个生命周期可以干什么

生命周期

就VUE来说就是一个程序的即将创建到销毁的一个过程,也就是vm对象实例从创建到最终销毁的过程。

VUE生命周期4个阶段8个钩子函数(到某一阶段自动调用的函数)

在这里插入图片描述

1.初始阶段(虚拟的DOM生成)

beforeCreate()

初始化事件对象和生命周期,这时候调用beforeCreate()调用完以后进行初始化数据代理和数据检测的创建。这时候data还没创建无法访问data中的数据。
作用:可以在这时候加一些loading效果

created()

已经完成了初始化数据代理和数据监测可以访问data中的数据。
作用:结束loading效果,也可以发哦那个网络请求,获取数据,可以在这里添加定时器。

2.挂载阶段(真实DOM的生成)

beforeMount()

在这个函数内去操作DOM元素无法不生效。

Mount()

在这个函数内去操作DOM元素可以生效。到这里页面的初次渲染就结束了。
作用:可以操作页面的DOM元素。

3.更新阶段(只有data中的数据变化了才会进入这个阶段)

beforeUpdate()

data中数据已经变化了但是页面还没有变化就会调用这个钩子函数。
作用:适合再更新之前访问现有的DOM,移除一些已经添加的事件监听器。

Update()

data中的数据变化了页面也变化了就会调用这个钩子函数。
作用:适合页面更新后,对数据做统一的处理

4.销毁阶段(只有执行this.$destroy()方法才会执行)

这里销毁是vm上绑定的数据检测数据代理之类的属性,销毁的不是vm实例,vm实例依然存在。

beforeDestroy()

其实成为解绑更为合理,解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之前做的事情。重点就是以上的都还未解绑还存在但是已经不可用了。
作用:适合做清除定时器。

Destroy()

解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之后做的事情

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值