vue3

16.vue3/project1/src/App.vue

@@ -2,8 +2,9 @@
   <div>
     <hr />
     <hr />
-    <Demo12 ref="main"></Demo12>
-    <button @click="getMain">展示</button>
+    <Demo13 v-if="show"></Demo13>
+    <!-- <Demo12 ref="main"></Demo12>
+    <button @click="getMain">展示</button> -->
 
     <hr />
     <hr />
@@ -41,12 +42,14 @@ import { ref, reactive } from "vue";
 // import Demo8 from "./components/Demo8.vue";
 // import Demo9 from "./components/Demo9.vue";
 // import Demo10 from "./components/Demo10.vue";
-import Demo11 from "./components/Demo11.vue";
-import Demo12 from "./components/Demo12.vue";
+// import Demo11 from "./components/Demo11.vue";
+// import Demo12 from "./components/Demo12.vue";
+import Demo13 from "./components/Demo13.vue";
 let main = ref();
 function getMain() {
   console.log(main.value);
 }
+let show = ref(true);
 </script>
 
 <style lang="scss" scoped>

16.vue3/project1/src/components/Demo13.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <h1>Demo13</h1>
+    <p>{{ msg }}</p>
+    <button @click="handleShow">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  onBeforeUpdate,
+  onUpdated,
+  onBeforeUnmount,
+  onUnmounted,
+} from "vue";
+let a = ref();
+let num = ref(20);
+let q = ref(222);
+let msg = ref("你好啊");
+const getMain = () => {
+  console.log(a.value);
+};
+defineExpose({ num, q });
+/**
+ * setup => 创建
+ * 挂载
+ * onBeforeMount
+ * onMounted
+ */
+onMounted(() => {
+  console.log("onMounted");
+});
+onBeforeMount(() => {
+  console.log("onBeforeMount");
+});
+function handleShow() {
+  msg.value = "修改了";
+}
+onBeforeUpdate(() => {
+  console.log("onBeforeUpdate");
+});
+onUpdated(() => {
+  console.log("onUpdated");
+});
+onBeforeUnmount(() => {
+  console.log("onBeforeUnmount");
+});
+onUnmounted(() => {
+  console.log("onUnmounted");
+});
+</script>
+
+<style lang="scss" scoped>
+</style>