vue3学习之生命周期

学习Vue3 第十二章（认识组件&Vue3生命周期）

子组建

<template>
    <div>HelloWorld</div>
    <div ref="div">{{ str }}</div>
    <button @click="change">修改</button>
    <hr/>
</template>
<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'


const str = ref<string>("小满")
const div = ref<HTMLDivElement>()
const change = () => {
    str.value = '大满'
}

// beforeCreate created setup语法糖模式是没有这两个生命周期的 setup 去代替
console.log('setup', div.value)  // undefined
// 创建 onBeforeMount 读不到dom ------ onMounted 可以读取dom
onBeforeMount(() => {
    console.log("创建之前", div.value)  // undefined
})
onMounted(() => {
    console.log("创建完成", div.value)  // <div>小满</div>
})
// 更新 onBeforeUpdate 获取的是更新之前的dom ------ onUpdated 获取的是更新之后的dom
onBeforeUpdate(() => {
    console.log("更新组建之前", div.value?.innerText) // 小满
})
onUpdated(() => {
    console.log("更新组建完成", div.value?.innerText)  // 大满
})
// 销毁
onBeforeUnmount(() => {
    console.log("销毁之前")
})
onUnmounted(() => {
    console.log("销毁完成")
})
</script>

父组建

<template>
    <HelloWord v-if="flag"></HelloWord>
    <button @click="flag=!flag">创建 --- 销毁</button>
</template>

<script setup lang="ts">
import HelloWord from "./components/HelloWorld.vue"
import { ref } from "vue";

const flag = ref<Boolean>(true)
</script>