小白也能懂的VUE的生命周期探寻

时间:2021-1-18 作者:admin

Vue生命周期

作为vue的核心之一,生命周期不管是文档还是面试都是高频知识点今天我们从什么是生命周期,生命周期的内容,如何利用生命周期出发,做一些探究

生命周期的理解

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

  • 通俗的说:当加载一个页面的时候,会创建一个vue实例来展示这个页面,

    第一阶段

    • 最先开始的 是创建,也就是 beforeCreate ,这个阶段,实例初步被创建,还没有初始化,就是一个具备基本模板,没有任何数据和事件的光杆司令,

    • 然后进入到created阶段,这时候实例创建完成,并且立刻调用这个钩子里的函数,这时候数据观测 (data observer),watch/event 事件回调 的属性和方法配置完成,页面元素还没初始化,

    • 接下来准备开始挂载dom节点,以供操作,在挂载之前 beforeMount 阶段,这时候相关的render函数首次被调用,并且完成页面元素和数据的初始化,

    • 然后mounted阶段,这时候属性有了,方法有了,页面元素有了,数据也有了,所以这个阶段会对DOM节点进行操作,进行挂载完毕,并且挂载完毕后调用钩子里的函数,所以大多数的函数放在这里面,因为这里了开始可以对dom进行操作

    第二阶段

    • 第一阶段数据渲染完毕,页面展现完毕,这时候想要进行数据交互,这时的第一阶段是 beforeUpdate ,它发生在数据更新的调用时候,DOM还没有重新渲染之前,这时候可以进一步更改状态,而且不会触发重新渲染的过程
    • updated 阶段,这个阶段DOM以及重新渲染,可以行使操作新dom的的行为,但是应该避免出现这种行为,很可能会导致更新无线循环
    • beforeDestroy 阶段,上一阶段的行为最好放在这里使用这是实例销毁之前的最后完整保留
    • destroyed this.$destroy() ,这个阶段实例被销毁,实例相关的一切消失,

    小结: 生命周期钩子的一些使用方法: beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框

    经典生命周期图

这张图有不理解的可以查上面的白话,还有不理解的可以留言,看到了会尽力回答, 后期会更新源码配合理解

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。