Vue3.X 生命周期（三）

接着上一节的 Vue3.X 掌握基础知识（二）的说明，这一节说明了vue的生命周期。

一、生命周期

这一节讲解了vue3.X 的生命周期数据的渲染前与渲染后的区别。

<template>
    <div>
        <h2>vue3的生命周期</h2>
        <div id="dom">{{ msg }}</div>
    </div>

</template>

<script>
    import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, reactive, toRefs } from "vue"
    export default {
        name: "about",
        setup() {  // 生命周期
            const data = reactive({
                msg: "你好！"
            })

            // 数据渲染前
            onBeforeMount(()=>{
                console.log("onBeforeMount", document.querySelector("#dom"))
            })

            // 数据渲染后
            onMounted(()=>{
                console.log("onMounted", document.querySelector("#dom"))
                setTimeout(()=>{
                    data.msg = "hello"
                }, 2000)
            })

            // dom更新前
            onBeforeUpdate(()=>{
                console.log("onBeforeUpdate")
            })

            // dom 更新后
            onUpdated(()=>{
                console.log("onUpdated")
            })
            
            return {
                ...toRefs(data)
            }

        }
    }

</script>

<style>
    .Red {
        color: red;
    }
</style>