Vue3.0商店后台管理系统项目实战-生命周期

<template>
  <div class="about">
    <h1>vue3的生命周期</h1>
    <div id="dom">{{ msg }}</div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
} from "vue";
export default {
  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", document.querySelector("#dom"));
    });
    //dom更新后
    onUpdated(() => {
      console.log("onUpdated", document.querySelector("#dom"));
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>