脚本宝典收集整理的这篇文章主要介绍了

Vue2.0七——生命周期

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

vue2.0新增的

  • 什么是vue的生命周期

    指的是实例从创建到销毁的过程,就是生命周期。
    也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
    ,我们称这是 Vue 的生命周期。
  • 生命周期的作用

    生命周期中有多个钩子函数,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
  • 总共有八个阶段也就是八个钩子函数

    创建前/后, 载入前/后,更新前/后,销毁前/销毁后
  • 页面第一次加载的时候会触发beforeCreate, created, beforeMount, mounted 这几个钩子,DOM 渲染在 mounted 中就完成
  • 每个周期的具体场景
    1、beforeCreate

       在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
    

    2、created

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

    3、beforeMount

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

    4、mounted

       el 被新创建的 vm.$el 替换,
       并挂载到实例上去之后调用该钩子。
       如果 root 实例挂载了一个文档内元素,
       当 mounted 被调用时 vm.$el 也在文档内。
    

    5、beforeUpdate

       数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
       你可以在这个钩子中进一步地更改状态,
       这不会触发附加的重渲染过程。
    

    6、updated

       由于数据更改导致的虚拟 DOM,
       重新渲染和打补丁,在这之后会调用该钩子。
    
       当这个钩子被调用时,组件 DOM 已经更新,
       所以你现在可以执行依赖于 DOM 的操作。
       然而在大多数情况下,你应该避免在此期间更改状态
       ,因为这可能会导致更新无限循环。
       
       该钩子在服务器端渲染期间不被调用。
       

    7、beforeDestroy

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

    8、destroyed

       Vue 实例销毁后调用。
       调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,
       所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

总结

以上是脚本宝典为你收集整理的

Vue2.0七——生命周期

全部内容,希望文章能够帮你解决

Vue2.0七——生命周期

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过