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