关于生命周期,官方文档就很足够了!
关于每个生命周期的介绍也很详细!
beforeCreate
在组件实例初始化完成、props解析之后调用。
created
此时data/computed/metheds/watch都已经设置完成,但是实例还没有挂载到dom上,所以此时$el、ref暂不可用。
beforeMounted
此时,组件已经完成了其响应式状态的设置,生成了虚拟DOM,但是还没有创建Dom节点。即将首次执行Dom渲染过程。
mounted
在组件被挂载之后调用,DOM已经渲染到了页面。
beforeUpdate
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
updated
在组件因为一个响应式状态变更而更新其 DOM 树之后调用。 父组件的更新钩子将在其子组件的更新钩子之后调用。
beforeUnmount
在一个组件实例被卸载之前调用。
unmounted
在一个组件实例被卸载之后调用。可以在这个钩子中手动清理一些副作用。
父子组件的生命周期执行顺序
-
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
-
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
-
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed