生命周期映射关系表
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 { // ... } }}