Vue2 和 Vue3 的声明周期:
Vue2 的生命周期在Vue3中都可以正常使用; Vue3 的生命周期和Vue2不同的地方在于卸载组件前后的不同; Vue3 中组合式 API 还提供了onRenderTracked 和 onRenderTriggered 两个钩子,这两个主要是用来做调试的;
Vue2 和 Vue 3 周期的对照:
beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted errorCaptured -> onErrorCaptured
export default {
beforeCreate ( ) {
console. log ( 'beforeCreate()' )
} ,
created ( ) {
console. log ( 'created' )
} ,
beforeMount ( ) {
console. log ( 'beforeMount' )
} ,
mounted ( ) {
console. log ( 'mounted' )
} ,
beforeUpdate ( ) {
console. log ( 'beforeUpdate' )
} ,
updated ( ) {
console. log ( 'updated' )
} ,
beforeUnmount ( ) {
console. log ( 'beforeUnmount' )
} ,
unmounted ( ) {
console. log ( 'unmounted' )
} ,
setup ( ) {
const msg = ref ( 'abc' )
const update = ( ) => {
msg. value += '--'
}
onBeforeMount ( ( ) => {
console. log ( '--onBeforeMount' )
} )
onMounted ( ( ) => {
console. log ( '--onMounted' )
} )
onBeforeUpdate ( ( ) => {
console. log ( '--onBeforeUpdate' )
} )
onUpdated ( ( ) => {
console. log ( '--onUpdated' )
} )
onBeforeUnmount ( ( ) => {
console. log ( '--onBeforeUnmount' )
} )
onUnmounted ( ( ) => {
console. log ( '--onUnmounted' )
} )
return {
msg,
update
}
}
}