Skip to main content

vue 生命周期

Vue2 和 Vue3 的生命周期不太一样

Vue2 生命周期

概览

vue2 生命周期分为 8 个阶段,分别是:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
    另外还有一个 activated 和 deactivated,这两个钩子函数只有在使用 keep-alive 组件时才会被调用。 图示如下: vue2 生命周期

详细说明

beforeCreate

在组件初始化的时候会运行,只会运行一次。可以在此函数里面调用后台接口获取数据,data 和 methods 都没初始化,此时组件还没有被挂载,所以无法获取到 DOM 元素。

created

在组件初始化的时候会运行,只会运行一次。此时 data 和 methods 已经初始化,可以在此函数里面调用后台接口获取数据,此时组件还没有被挂载,所以无法获取到 DOM 元素。

beforeMount

在组件挂载之前运行,只会运行一次。此时组件已经被编译成虚拟 DOM,但是还没有被挂载到页面上。

mounted

在组件挂载之后运行,只会运行一次。此时组件已经被编译成虚拟 DOM,并且已经被挂载到页面上,可以在此函数里面获取到 DOM 元素。

beforeUpdate

在组件更新之前运行,会运行多次。此时组件的数据已经更新,但是页面上的数据还没有更新。

updated

在组件更新之后运行,会运行多次。此时组件的数据已经更新,页面上的数据也已经更新。

beforeDestroy

在组件销毁之前运行,只会运行一次。此时组件还没有被销毁,可以在此函数里面做一些清理工作。

destroyed

在组件销毁之后运行,只会运行一次。此时组件已经被销毁,可以在此函数里面做一些清理工作。

activated

在 keep-alive 组件激活时运行,只会运行一次。此时组件已经被激活,可以在此函数里面做一些初始化工作。

deactivated

在 keep-alive 组件停用时运行,只会运行一次。此时组件已经被停用,可以在此函数里面做一些销毁工作。

Vue3 生命周期

概览

在 Vue3 中,生命周期函数被重命名了,分别是:

  • beforeCreate -> 不再需要
  • created -> 不再需要
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • activated -> onActivated
  • deactivated -> onDeactivated
    另外还有一个 onRenderTracked 和 onRenderTriggered,这两个钩子函数只有在使用 keep-alive 组件时才会被调用。
    图示如下: vue3 生命周期

详细说明

setup()

生命周期写在 setup(props,context){}