Vue3的生命周期
生命周期的概念理解:vue实例从创建、挂载、更新到销毁这一整个过程叫做生命周期。
Vue3生命周期的类型
选项式API | 组合式API生命周期钩子(setup) | |
---|---|---|
beforeCreate | Not needed | |
created | Not needed | |
beforeMount | onBeforeMount | 注册一个钩子 ,在组件被挂载之前被调用 |
mounted | onMounted | 注册一个回调函数,在组件挂载完成后执行 |
beforeUpdate | onBeforeUpdate | 注册一个钩子 ,在组件即将因为响应式状态变更而更新其 DOM 树之前调用 |
updated | onUpdated | 注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用 |
beforeUnmount | onBeforeUnmount | 注册一个钩子 ,在组件实例被卸载之前调用 |
unmounted | onUnmounted | 注册一个回调函数,在组件实例被卸载之后调用 |
-
钩子:表示一个函数
-
组合式API(即setup() 内部)调用的生命周期钩子里是没有
beforeCreate
和created
函数的。
原因是:
setup
选项在组件被创建之前执行,不需要使用this,this不会指向示例。beforeCreate
和 created
能做的事情在 setup
也能实现。
setup
是围绕 beforeCreate
和 created
生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup
函数中编写。
Vue3生命周期执行示例
<template>
<div class="count">
<!-- 使用v-if来演示卸载页面元素 -->
<div v-if="isShow">
<el-tag :key="count">数量显示:{{ count }}</el-tag>
<el-button type="primary" size="small" @click="count++">加 1</el-button>
</div>
<el-button type="danger" size="small" @click="isShow = false"
>卸载</el-button
>
</div>
</template>
<script setup lang="ts">
import {ref,beforeCreate,created,onBeforeMount,onMounted,onBeforeUpdated,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';
const count = ref(0);
const isShow = ref(true);
beforeCreate(()=>{ //无调用
console.log("beforeCreate");
});
created(()=>{ //无调用
console.log("created");
});
onBeforeMount(()=>{ //进入页面时触发调用
console.log("onBeforeMount开始调用");
});
onMounted(()=>{ //进入页面时触发调用
console.log("onMounted开始调用");
})
onBeforeUpdated(()=>{ //点击“加1”按钮时调用
console.log("onBeforeUpdated开始调用");
})
onUpdated(() => {
console.log("onUpdated 开始调用"); //点击“加1”按钮时调用
});
onBeforeUnmount(() => {
console.log("onBeforeUnmount 开始调用"); //点击“卸载”按钮时触发
});
onUnmounted(() => {
console.log("onUnmounted 开始调用"); //点击“卸载”按钮时触发
});
</script>
<style></style>