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>
内被切换,它的activated
和deactivated
这两个生命周期钩子函数将会被对应执行。