生命周期历程

什么是生命周期?
    vue实例从创建到挂载到更新,最后销毁,这整个流程叫做vue的生命周期

生命周期钩子函数
    // 初始化构建阶段
    beforeCreate  vue实例初始化完成之前,完成了vue事件、属性的初始化,但是访问不到vue实例中的data、methods
    created  vue实例初始化完成,可以访问实例内部的数据和方法

    // 挂载阶段
    beforeMount  完成了模板的解析,但是数据/dom节点没有绑定到模板上
    mounted      vm.$el虚拟dom替换el Dom,完成了数据绑定、dom渲染。

    // 更新阶段
    beforeUpdate 数据已经修改,虚拟dom也构建完毕,但是没有渲染到页面上
    updated      更新过后的虚拟dom节点,成功渲染到页面上

    // 销毁阶段 this.$destroy()
    beforeDestroy vue实例销毁之前,还可以访问实例
    destroyed     vue实例上绑定的事件、监听器、子组件销毁完毕,访问不到vue实例了

Vue生命周期具体解释
从vue实例创建到虚拟dom产生再到数据绑定监听数据渲染以及销毁的整个过程
### vue实例初始化阶段
beforeCreate
    在Vue实例初始化的时候调用了beforeCreate,完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能访问数据模型中的data和methods中的方法。
created
    在初始化完毕之后,完成vue的数据注入以及数据监听操作,该构造的执行意味W着vue实例创建完毕,可以进行data数据模型和和methods方法的访问
### vue实例挂载阶段
beforeMount
    在created之后,vue会判断实例中是否含有el属性,如果没有vm.$mount(el),接着会判断是否含有template属性,如果有将其解析为一个render function,如果没有将el指定的外部
html进行解析。这里只完成了模板的解析但是数据并没有绑定到模板中。
mounted
    创建vm.$el替换el,实际上完成的是数据绑定操作,在其间执行乐render函数,将模板进行了解析,将数据进行了动态绑定
### vue实例更新阶段
    beforeUpdate
    更新虚拟dom节点
    updated
    完成了页面的重新渲染
### vue实例销毁阶段
    beforeDestroy
    销毁之前调用,此时可以访问vue实例
    destroyed
    完成了监听器,子组件,事件监听等移除,销毁vue实例对象

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值