Vue 生命周期的简单总结(属于掘金的第一篇文章,欢迎指正(●'◡'●))

Vue 的生命周期是指从建立-->挂载-->更新-->销毁的过程,简单地说,一个组件从开始建立到最后销毁所经历的各类状态,就是一个组件的生命周期。首先,官方文档对于Vue生命周期的图解必定要仔细研究一波,请看官方图解(虽然仍是不懂)O(∩_∩)O

Vue生命周期图示

从图示能够看到,Vue的生命周期实际上分为八个步骤,分别是 beforeCreate,created,beforeMount,Mounted,beforeUpdate,updated,beforeDestroy,destroyed。下面对每一个阶段进行简单的分析.

  • beforeCreate 阶段,发生在实例初始化以后,数据观测(data observer)和event/watcher 事件配置以前,此时没法获取data中的数据和methods中的方法
  • created 阶段,在实例已经建立完成以后被调用,这里数据观测,属性和方法的运算都已经被配置,Vue实例的数据对象data有了,$el尚未。使用场景:发送请求获取数据
  • beforeMount,在Vue实例挂载以前被调用
  • 在Mounted阶段,此时Vue实例已经挂载到页面中,能够获取到el中的DOM元素,进行DOM操做
  • beforeUpdate阶段,数据更新时调用,发生在虚拟DOM从新渲染和打补丁以前,这时候能够在这个阶段进一步地更改状态这不会出发附加的重渲染过程
  • updated阶段,组件DOM已经更新,此时能够执行依赖于DOM的操做
  • beforeDestory,在Vue实例销毁以前被调用,在这一步,实例彻底可用。使用场景:实例销毁以前,执行清理任务,好比定时器的消除等
  • destroyed,在Vue实例销毁以后调用,调用后,Vue实例指示的全部东西都会解绑,,全部的事件监听器会被移除,全部的子实例也会被销毁,但DOM结构任然存在

今天又是充满但愿的一天,继续加油( ̄▽ ̄)"

平常吸猫
相关文章
相关标签/搜索