vue3声明周期，语法糖模式

语法糖模式

<script setup>
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onUnmounted,
  onUpdated,
  onMounted,
  ref,
  onActivated,
  onDeactivated,
} from "vue";

defineProps<{ msg: string }>();

const count = ref(0);
const name = ref("彭");
let update = () => {
  console.log("update");
  name.value = "点击了";
};

function table() {
  const gander = "男";
  return {
    gander,
  };
}
let table1 = table();

onBeforeMount(() => {
  console.log("onBeforeMount");
  console.log(name.value);
  console.log(document.getElementById("count"));
});
onMounted(() => {
  console.log("onMounted");
  console.log(name.value);
  console.log(document.getElementById("count"));
});

onActivated(() => {
  console.log("onActivated");
});

onDeactivated(() => {
  console.log("onDeactivated");
});

onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
  console.log(name.value);
});

onUpdated(() => {
  console.log("onUpdated");
  console.log(name.value);
});

onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});

onUnmounted(() => {
  console.log("onUnmounted");
});
</script>

<template>
  <h1>{{ msg }}</h1>
  <h2 @click="update">{{ name }}</h2>
  <h4 id="count">{{ count }}</h4>
  <h4>{{ table1.gander }}</h4>
</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>