浅谈vue2.0生命周期

2022-11-30 0 903

预测

vue的开发周期是甚么呢?

在vue的建立,采用,封存操作过程中,会有很多该事件,那些该事件就被泛称为心灵指数表达式,也叫做开发周期钳子。

包涵:beforeCreat、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed那些表达式。

具体来说,他们能分为四种类别:

DOM构筑/图形前:beforeCreat、created、beforeMount、mountedDOM图形后:beforeUpdate、updated返回网页:beforeDestroy、destroyed

DOM构筑/图形前期:

第二个心灵指数表达式:beforeCreat,当继续执行beforeCreat心灵指数表达式时,vue示例还没被全然建立出,此时data,methods等外部没初始化。第三个心灵指数表达式:created,继续执行那个表达式的此时候,vue示例早已初始化了,能在这儿初始化统计数据,但是还没图形到网页上。 在现阶段表达式中他们能出访到data中的特性,此时,会将data中的特性和methods的方式加进到vue的示例头上,与此同时会将data中大部份的特性加进两个getter/setter方式。这儿能展开其间端上统计数据可视化(ajax允诺的此时候) 须要在现阶段开发周期中采用。第三个心灵指数表达式:beforeMount,此时,vue早已将模版数组载入缓存交互式DOM,模版早已校对顺利完成,早已顺利完成图形树,还没图形到网页上。第五个:mounted,建立期顺利完成,网页图形完,步入运转期。此时他们能透过$refs来出访到真实世界的DOM内部结构。ref类似于与id那样 值要是惟一的,出访的此时候他们能采用this.$refs.特性,能展开使用者可视化操作方式。

DOM图形后期

当统计数据发生变化,比如触发了点击该事件改动统计数据

beforeUpdate:缓存中的统计数据早已改变,网页上的还没更新updated:网页上统计数据和缓存中的一致

返回期

返回网页封存、解绑该事件,例如:定时器等

beforeDestroy:出发那个表达式时,还没开始封存,此时刚刚脱离运转期。data,methods,指令之类的都在正常运转。在那个心灵指数表达式中他们能将绑定的该事件展开移除destroyed:组件封存完,data,methods,指令之类的不可用。
浅谈vue2.0生命周期

开发周期理解(带图的呦)

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务