Skip to content

19.Vue 的生命周期方法有哪些?一般在哪一步发送请求及原因

1.1 Vue2 中的生命周期

主要的生命周期有:创建前后, 挂载前后, 更新前后, 销毁前后

  • beforeCreate 初始化父子关系及事件,数据观测(data observer) 之前被调用。用此方法一般编写插件的时候会用到。

  • created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法等, 但是这里没有$el,一般也不咋用。

  • beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。

  • mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。可以用于获取 DOM 元素

  • beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。此时修改数据不会再次出发更新方法

  • updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

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

  • destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

  • keep-alive (activated 和 deactivated)

1.2 V2 和 V3 中的生命周期对比

Vue2 生命周期Vue3 生命周期

生命周期 v2生命周期 v3描述
beforeCreatebeforeCreate组件实例被创建之初
createdcreated组件实例已经完全创建
beforeMountbeforeMount组件挂载之前
mountedmounted组件挂载到实例上去之后
beforeUpdatebeforeUpdate组件数据发生变化,更新之前
updatedupdated数据数据更新之后
beforeDestroybeforeUnmount组件实例销毁之前
destroyedunmounted组件实例销毁之后
activatedactivatedkeep-alive 缓存的组件激活时
deactivateddeactivatedkeep-alive 缓存的组件停用时调用
errorCapturederrorCaptured捕获一个来自子孙组件的错误时被调用
-renderTracked Dev调试钩子,响应式依赖被收集时调用
-renderTriggered Dev调试钩子,响应式依赖被触发时调用
-serverPrefetchssr only,组件实例在服务器上被渲染前调用

Vue3 中新增了,组合式 API:生命周期钩子,但是不存在 onBeforeCreate 和 onCreated 钩子

Released under the MIT License.