vue3声明周期，语法糖模式

曹え 5811 发布于：2022-07-08 12:03:15

语法糖模式

<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>

觉得有用请点个赞吧！

1 1206

99元开通年度会员！
1000+模块代码随便下载！

vue3声明周期，语法糖模式

最新