Vue2 生命周期

 最近使用Vue2做了一个项目,在使用的过程中对数据的请求发生在实例创建哪个阶段有点不清楚,在论坛查阅资料后,对Vue2实例创建生命周期做一个总结。

 在最开始,想把数据放在created钩子上进行请求,发现请求的数据并不能挂载到data里面。因为data还没有进行初始化,数据的初始化是在created和beformount之间发生的。所以请求放在mounted钩子,然后将请求到的数据更新到已经初始化了的数据上。

Vue2生命周期图在官方文档中如下:

在Vue2中,生命周期钩子分别是:


beforeCreate:实例刚创建,属性绑定之前


created:实例创建完成,属性绑定,但是还未将实例挂载到'el'上,也就是挂载元素上。


在created之后会进行一个判断,实例创建中是否是具有'el'这个选项(option),如果有,那么判断是否具有template模板这个选项,如果没有,那么当实例被创建后使用vm.$mount(el)手动进行挂载再进行判断是否具有template。在判断template时,如果具有template那么将template编译进渲染函数,如果没有就将'el'的外部HTML作为template。


beforeMount:模板编译/挂载前


在beforeMount和mounted之间会创建一个$el用来替换'el',也就是将编译好的模板挂载到对应的挂载元素上。


mounted:模板编译/挂载之后


在mounted请求数据时,将数据更新到已经初始化后的数据里。在这个过程中,会先执行beforeUpdate后执行updated,在这两个生命钩子间执行DOM的重新渲染和patch(不知道怎么去形容,原意是补丁的意思,按我理解就是将原来data没有的数据添加到data里面)


在执行手动销毁(实例名.$destroy())后执行beforeDestroy

在beforeDestroy和destroyed之间会将数据监听(watchers),事件监听(listeners)和子组件(components)拆除。

再执行destroyed。

举例对生命钩子的使用:

beforCreate:在加载DOM创建实例时插入loading等

created:结束loading

mounted:发起数据请求,更新数据

beforeDestory:在这可以询问是否是删除某某某

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值