关于vue.js:Vue3生命周期

51次阅读

共计 628 个字符，预计需要花费 2 分钟才能阅读完成。

官网文档

上面总结下几个罕用的生命周期钩子执行程序

一单个组件生命周期钩子执行程序

<template>
   <div>{{num}}</div>
</template>

<script setup lang="ts">

import { 
    ref, watchEffect, 
    onBeforeMount, onMounted,
    onBeforeUpdate,onUpdated,
    onBeforeUnmount,onUnmounted
} from 'vue';

//--------------------------------
let num = ref(1);
setTimeout(() => {num.value += 1;}, 500);
//--------------------------------
watchEffect(() => {
        let b = num.value;
        console.log('welcom 组件 --watchEffect');
    },
    {
        // flush: 'post'
        flush: 'pre' // 默认此配置
    }
);
//--------------------------------
onBeforeMount(() => {});

onMounted(() => {});

onBeforeUpdate(() => {});

onUpdated(() => {});

onBeforeUnmount(() => {});

onUnmounted(() => {});

</script>