Vue更新版生命周期

截止v2.6.10版本,Vue相关的选项/生命周期共有11个:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed
  • errorCaptured

生命周期顺序:

初始化生命周期和方法 -> beforeCreate -> 初始化依赖注入和响应式 -> created -> 模板解析编译 -> beforeMount -> 创建element节点 -> mounted -> 如果数据被更新 -> updated -> 触发重新渲染和patch (-> 如果数据继续更新 -> beforeUpdate -> 调用destroy方法 -> beforeDestroy -> 销毁子节点&watcher&事件监听 -> destroyed

  • activated
    keep-alive 组件激活时调用。
    该钩子在服务器端渲染期间不被调用。

  • deactivated
    keep-alive 组件停用时调用。
    该钩子在服务器端渲染期间不被调用。

  • errorCaptured
    2.5.0+ 新增
    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

这里提一下keep-alive, 这是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。当组件在<keep-alive> 内被切换,它的 activateddeactivated 这两个生命周期钩子函数将会被对应执行。