Vue生命周期的简单理解

 首先,Vue中的生命周期是借鉴reactjs中的,angularjs没有生命周期一说。
 vue中的生命周期:描述了一个实例化对象或组件对象从有到无的整个过程;它主要是用来管理一个实例化对象或一个组件对象,从创建到销毁这个过程中的更改和变化。
 生命周期管理实例化对象和一个组件对象的从创建到销毁的过程,用到了钩子函数;vue中钩子函数目前总共有11个;其中分4个阶段(创建阶段,挂载阶段,更新阶段、销毁阶段)共包含8个钩子函数;另外三个钩子函数用在比较特殊的地方。
 生命周期的钩子函数的this:必定是指向当前生成的实例对象的;所以钩子函数不能使用箭头函数;
下面浅谈一下我的理解:
**创建阶段**
1.beforeCreate(){};**创建实例对象之前的钩子函数**:其实该实例对象已经实例化了,只不过不完整,该实例对象的data数据和methods事件方法还没有配置好,在该阶段的该函数内部是无法拿到该实例对象的data数据和methods事件和方法的;
在该函数内,易做loading的加载图
2.create(){}:**创建实例对象之后的钩子函数**;此时实例化对象已经完全生成及配置好了;在该阶段的该函数内,可以拿到该实例对象的data数据和methods事件和方法的;
挂载阶段
创建阶段已经创建了实例对象,创建好的实例对象要挂载到生成vue实例对象的dom元素节点上,进行vue语法的编译展示出来;
1.beforeMount(){}:**挂载之前钩子函数**;在这个函数内部是可以拿到要挂载的dom元素节点;但是该dom节点内实例对象的data数据和方法事件没有被vue语法编译;无法展示数据;
2、mounted(){}:**挂载之后钩子函数**;这个函数内部是可以拿到要挂载的dom元素节点,在该dom元素内的该实例对象的data数据和事件方法已经别vue语法编译了,展示了数据;
更新阶段
该阶段生成的实例对象内的data数据或事件方法发生更改时;触发该阶段的两个函数;
1、beforeUpdate(){}:**更新之前的钩子函数**;这个函数管理的是展示的实例对象内的data数据没更改之前的时候,vue语法编译出来的dom元素结构内的数据展示;
2、update(){}:**更新之后的钩子函数**;这个函数是管理实例对象内的data数据更改之后,vue语法编译出来的dom元素结构展示的数据已经更新;
销毁阶段
该阶段是指:该实例对象的data数据和methods事件方法,与该实例对象解除了绑定,而不是指浏览器回收了该实例对象;
该阶段需要调用该实例的销毁的方法this.$destroy();该方法执行时;触发该阶段的两个钩子函数;
1、beforeDestroy(){}:**实例销毁之前的钩子函数**;在该函数内实例任然是可用的;
2、destroyed(){}:**实例销毁之后的钩子函数**;在该函数内实例对象的数据和方法是无法使用的;实例指向的所有东西会被解除,所以的事件监听都被移除;所有的子实例对象也会被销毁;

3个特殊的钩子函数:
1.actived和deactivated两个钩子函数主要是用于keep-alive缓存组件触发时,调用;
2.errorCaptured钩子函数:是在你的子孙组件发生错误时才触发的,没有错误是不会触发的;

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值