vue3.0 生命周期方法共有9个:
1. beforeCreate:实例创建前,数据观测和事件配置之前调用;
2. created:实例已经创建完成后调用;
3. beforeMount:实例挂载之前调用;
4. mounted:实例挂载之后调用;
5. beforeUpdate:响应式数据更新时调用,发生在虚拟 DOM 打补丁之前;
6. updated:响应式数据更新完毕后调用,发生在虚拟 DOM 打补丁之后;
7. beforeUnmount:实例销毁之前调用;
8. unmounted:实例销毁之后调用;
9. errorCaptured:捕获子组件错误时调用。
使用生命周期方法,可以通过在组件中提供相应的函数来处理生命周期的各个阶段中的逻辑。在 Vue3.0 中,生命周期函数的写法和 Vue2.x 有所不同,具体如下:
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue';
export default {
name: 'MyComponent',
onBeforeMount() {
// 实例挂载之前调用
},
onMounted() {
// 实例挂载之后调用
},
onBeforeUpdate() {
// 响应式数据更新时调用,发生在虚拟 DOM 打补丁之前
},
onUpdated() {
// 响应式数据更新完毕后调用,发生在虚拟 DOM 打补丁之后
},
onBeforeUnmount() {
// 实例销毁之前调用
},
onUnmounted() {
// 实例销毁之后调用
},
onErrorCaptured(err, instance, info) {
// 捕获子组件错误时调用
}
}
在组件中,可以通过这些函数来处理相应的逻辑。需要注意的是,Vue3.0 中不再支持 beforeDestroy
和 destroyed
这两个生命周期函数,取而代之的是 beforeUnmount
和 unmounted
。同时,在 Vue3.0 中,只有在使用了 setup
函数的情况下才能使用生命周期函数。