Vue2和Vue3生命周期映射关系及异同

生命周期映射关系表

beforeCreate -> 使用 setup()
created -> 使用 use setup()
beforeMount ->onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy-> onBeforeUnmount
destroyed ->onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

映射关系说明

beforeCreate -> 使用 setup() 函数替代

Vue 2 中的 beforeCreate 钩子函数在 Vue 3 中被废弃了，使用 setup() 函数替代。在 setup() 函数中可以访问到 props、data、computed、methods 等属性。

created -> 使用 setup() 函数替代

Vue 2 中的 created 钩子函数在 Vue 3 中被废弃了，使用 setup() 函数替代。在 setup() 函数中可以访问到 props、data、computed、methods 等属性。

beforeMount -> onBeforeMount

Vue 2 中的 beforeMount 钩子函数在 Vue 3 中被重命名为 onBeforeMount。

mounted -> onMounted

Vue 2 中的 mounted 钩子函数在 Vue 3 中被重命名为 onMounted。

beforeUpdate -> onBeforeUpdate

Vue 2 中的 beforeUpdate 钩子函数在 Vue 3 中被重命名为 onBeforeUpdate。

updated -> onUpdated

Vue 2 中的 updated 钩子函数在 Vue 3 中被重命名为 onUpdated。

beforeDestroy -> onBeforeUnmount

Vue 2 中的 beforeDestroy 钩子函数在 Vue 3 中被重命名为 onBeforeUnmount。

destroyed -> onUnmounted

Vue 2 中的 destroyed 钩子函数在 Vue 3 中被重命名为 onUnmounted。

activated -> onActivated

Vue 2 中的 activated 钩子函数在 Vue 3 中被重命名为 onActivated 。

deactivated -> onDeactivated

Vue 2 中的 deactivated 钩子函数在 Vue 3 中被重命名为 onDeactivated。

errorCaptured -> onErrorCaptured

Vue 2 中的 errorCaptured 钩子函数在 Vue 3 中被重命名为 onErrorCaptured。

vue3新增生命周期钩子函数

onRenderTracked

onRenderTracked 函数会在组件渲染时被调用，它接收两个参数：target 和 key。target 是被追踪的组件实例，key是被追踪的属性名。该函数可以用来追踪组件的渲染过程，例如记录组件渲染的次数、渲染的时间等信息。

onRenderTriggered

onRenderTriggered 函数会在组件渲染时被调用，它接收一个参数：target。target是被追踪的组件实例。该函数可以用来追踪组件的渲染触发过程，例如记录组件渲染的原因、渲染的时间等信息。

如何使用

import { onRenderTracked, onRenderTriggered } from 'vue'
//这两个函数都是调试工具函数，只在开发环境下生效。
//可以通过在组件中使用 debugger 语句来触发这两个函数。
//在组件渲染时，这两个函数会被触发，并输出相应的信息。
//这些信息可以帮助开发者更好地理解组件的渲染过程，从而优化组件的性能。
export default {
  setup() {
    onRenderTracked((target, key) => {
      console.log(`Render tracked: ${target} - ${key}`)
    })

    onRenderTriggered(target => {
      console.log(`Render triggered: ${target}`)
    })

    return {
      // ...
    }
  }
}