vue3 - 08.生命周期函数

<template>
  <div>
    <div ref="dom">{{str}}</div>
    <button @click="handleUpdate">点击触发更新生命周期函数</button>
  </div>
</template>
<script setup lang="ts">
    import {
        ref, 
        onBeforeMount, 
        onMounted, 
        onBeforeUpdate, 
        onUpdated, 
        onBeforeUnmount, 
        onUnmounted, 
        onRenderTracked, 
        onRenderTriggered
    } from 'vue'

    const str = ref<string>("xiaoming")
    const dom = ref<HTMLDivElement>()

    // vue3 的 setup 语法糖没有beforeCreate和created，直接用 setup 代替

    console.log("setup")

    // 创建前
    onBeforeMount(() => {
        console.log("创建前")
        // 在onBeforeMount读不到dom，因为这个时候，dom还没有被渲染
        console.log("dom ---> ", dom.value) // undefined
    })

    // 创建后
    onMounted(() => {
        console.log("创建后")
        // 在onMounted可以读到dom，因为这个时候，dom已经被渲染
        console.log("dom ---> ", dom.value) // <div></div>
    })

    // 更新前
    onBeforeUpdate(() => {
        console.log("更新组件前")
        // 在更新组建中获取dom，onBeforeUpdate获取到的同样也是更新之前的dom
        console.log("dom ---> ", dom.value?.innerText) // xiaoming
    })

    // 更新后
    onUpdated(() => {
        console.log("更新组件后")
        // 在更新组建中获取dom，onUpdated获取到的才是更新之后的dom
        console.log("dom ---> ", dom.value?.innerText) // xiaohong
    })

    // 销毁前
    onBeforeUnmount(() => {
        console.log("销毁前")
    })

    // 销毁后
    onUnmounted(() => {
        console.log("销毁后")
    })

    // 用于调试的两个生命周期函数
    // 默认先执行
    onRenderTracked((e) => {
        console.log(e)
    })
    // 当触发更新生命周期函数的时候执行并返回更新之后的数据
    onRenderTriggered((e) => {
        console.log(e)
    })

    const handleUpdate = () => {
        str.value = "xiaohong"
    }
</script>
<style scoped lang="less"></style>