2022/12/14 vue-生命周期

79 阅读1分钟

关于生命周期,官方文档就很足够了! image.png 关于每个生命周期的介绍也很详细!

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