Vue3学习-day2-生命周期

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <h2>vue3的生命周期</h2>
  <div id="dom">{{msg}}--{{num}}</div>
</template>
<script>
import { reactive, toRefs, onBeforeMount,onMounted,onBeforeUpdate,onUpdated} from "vue"
export default {
        name:"about",
        setup() {
            const data=reactive({
                msg:"nihao",
                msg2:"hello world",
                num:0
            })
            //渲染之前
            onBeforeMount(()=>{
                console.log("onBeforeMount",document.querySelector("#dom"))
            })
            //渲染之后
            onMounted(()=>{
                console.log("onMounted",document.querySelector("#dom"))
                //定时器
                setTimeout(()=>{
                    data.msg="hello"
                },2000)
            })
            onBeforeUpdate(()=>{
                console.log("onBeforeUpdate")
            })
            // dom更新之前
            onUpdated(()=>{
                console.log("onUpdated")
                //data.num+=1
                //一般不会写数据改变，因为会导致死循环
            })
            return {
                ...toRefs(data)
            }
        }
}
</script>