Vue3中的生命周期函数有所改变,以下是Vue3中的生命周期函数及其使用方式:
-
beforeCreate
:在Vue实例创建之前被调用,此时还没有初始化实例中的数据和事件。 -
created
:在Vue实例创建后立即调用,在此阶段,已经完成了数据的观测,可以使用已经设置的数据,也可以进行操作,但此时还没有挂载到DOM中。 -
beforeMount
:在Vue实例挂载到DOM之前被调用。 -
mounted
:在Vue实例挂载到DOM后被调用,此时数据已经更新渲染到DOM中,可以进行DOM操作。 -
beforeUpdate
:在数据更新之前被调用。 -
updated
:在数据更新之后被调用,此时DOM已经重新渲染。 -
beforeUnmount
:在Vue实例销毁之前被调用。 -
unmounted
:在Vue实例销毁之后被调用,此时DOM已经卸载完成,此时进行的操作为清理工作。
使用方式:
在Vue3中,可以使用onBeforeCreate
、onCreated
、onBeforeMount
、onMounted
、onBeforeUpdate
、onUpdated
、onBeforeUnmount
和onUnmounted
等函数来代替传统的生命周期函数。例如:
import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('mounted!');
});
onUnmounted(() => {
console.log('unmounted!');
});
}
}
以上就是Vue3中使用生命周期函数的方式。需要注意的是,Vue3中的生命周期函数使用的是函数式API,而不是对象式API。