跳到主要内容

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){} 中