Libx

Vue2.0生命周期以及生命周期钩子

字数统计: 878阅读时长: 3 min
2017/08/20 Share

Vue2.0生命周期以及生命周期钩子的一点理解

实例的生命周期在Vue里面可以说是很重要的了,如果不能理解生命周期的话,那么可能出现最多的报错便是‘ XXX is not defined ’,尤其是当涉及到数据传递的时候,更容易出现一些让人摸不著头脑的报错,而这些报错可能会很难比较难以找到错误的根源。在我上车的过程中就遇到过这样的问题,所以有必要写一篇博客来总结一下。

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。
以上是官网给出的Vue实例生命周期的比较准确的定义,具体要理解的话当然要结合生命周期的最经典的示例图:

beforeCreate

  • 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。即:el 和 data 并未初始化
    此时$el、data 的值都为undefined

created

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

beforeMount

  • 在挂载开始之前被调用:相关的 render 函数首次被调用。即:完成了 el 和 data 初始化,$el的值为“虚拟”的元素节点

mounted

  • el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内 。即:完成挂载
  • mount之后,mounted之前,“虚拟”的dom节点被真实的dom节点替换,并将其插入到dom树中,于是在触发**mounted时,可以获取到$el为真实的dom元素**

beforeUpdate

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

updated

  • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性watcher 取而代之。

    在我实际的使用过程中遇到了在updated中改变状态,结果导致了无限循环(把浏览器给卡死了,逃。。),很容易理解,因为在updated之后,状态update,update后又会触发updated,然后就GG了。

activated

  • keep-alive 组件激活时调用。

deactivated

  • keep-alive 组件停用时调用。

beforeDestroy

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

destroyed

  • Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
     
CATALOG
  1. 1. Vue2.0生命周期以及生命周期钩子的一点理解
    1. 1.1. beforeCreate
    2. 1.2. created
    3. 1.3. beforeMount
    4. 1.4. mounted
    5. 1.5. beforeUpdate
    6. 1.6. updated
    7. 1.7. activated
    8. 1.8. deactivated
    9. 1.9. beforeDestroy
    10. 1.10. destroyed