vue2生命周期

Vue的生命周期包括beforeCreate、created、beforeMount、mounted等阶段,每个阶段都有特定的任务,如created时适合获取异步数据,mounted可操作DOM。updated用于数据更新后的处理,watch和computed则分别针对数据变化的响应和计算属性的缓存。

什么是生命周期?

vue实例从创建到销毁的过程称之为vue的生命周期。

生命周期函数

beforeCreate 实例创建前:

这个阶段实例的data、methods是读不到的。

created 实例创建后:

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer)、属性和方法的运算,watch/event 事件回调;然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount挂载前:

在挂载开始之前被调用,相关的 render 函数首次被调用。

mounted挂载后:

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

beforeUpdate更新前:

数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

updated更新后:

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作,然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之

beforeDestory销毁前:

实例销毁之前调用,在这一步,实例仍然完全可用。

destroyed销毁后:

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

生命周期图

vue生命周期在真实场景下的业务应用?

created:进行ajax请求异步数据的获取、初始化数据

mounted:挂载元素内dom节点的获取

nextTick:针对单一事件更新数据后立即操作dom

updated:任何数据的更新,如果要做统一的业务逻辑处理

watch:监听具体数据变化,并做相应的处理,不支持缓存,支持异步数据

computed:vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新(当一个数据受到多个数据影响),支持缓存,不支持异步数据

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值