当前位置：首页 > article >正文

Vue3笔记——（二）

article 2025/2/1 2:01:14

015 生命周期
组件的生命周期：
【时刻】【调用特定的函数】
vue2生命周期
创建 beforeCreate、 created
挂载 beforeMounte、mounted
更新 beforeUpdate、updated
销毁 beforeDestroy、destroyed
生命周期、生命周期函数、生命周期钩子
vue3生命周期
创建 setup
挂载 onBeforeMounte、onMounted
更新 onBeforeUpdate、onUpdated
销毁 onBeforeUnmounte、onUnmounted

<template>
    <div>
        <h2>当前求和{{ sum }}</h2>
        <button @click="addFn">点我sum+1</button>
    </div>
</template>

<script setup lang="ts" name="person">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
// 数据
let sum = ref(0);
// 方法
function addFn() {
    sum.value++;
}
// 创建
console.log("创建");
// 挂载前，调用onBeforeMount中的回调函数
onBeforeMount(() => {
    console.log("挂载前");
});
onMounted(() => {
    console.log("挂载完毕");
})
// 更新前
onBeforeUpdate(() => {
    console.log("更新前");
})
// 更新后
onUpdated(() => {
    console.log("更新后");
})
// 卸载前
onBeforeUnmount(() => {
    console.log("卸载前");
})
// 卸载后
onUnmounted(() => {
    console.log("卸载后");
})
</script>