vue3

vue3/project1/src/App.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
     <h1>App</h1>
+    <Demo16 ref="vase"></Demo16>
     <hr>
     <hr>
-    <Demo14></Demo14>
+    <Demo15 v-if="isShow"></Demo15>
     <hr>
     <hr>
     <Demo11></Demo11>
@@ -52,8 +53,15 @@
 // import Demo9 from './components/Demo9.vue'
 // import Demo10 from './components/Demo10.vue'
 // import Demo11 from './components/Demo11.vue'
-import Demo14 from './components/Demo14.vue'
+import Demo15 from './components/Demo15.vue'
+import Demo16 from './components/Demo16.vue'
 // import Demo12 from './components/Demo12.vue'
+import { onMounted, ref } from 'vue';
+let isShow = ref(true);
+let vase = ref();
+onMounted(() => {
+  console.log(vase.value.a,vase.value.b)
+})
 </script>
 
 <style lang="scss" scoped>

vue3/project1/src/components/Demo15.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>生命周期</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,onBeforeMount,onMounted, onBeforeUpdate, onUpdated,onUnmounted,onBeforeUnmount} from "vue" 
+/**
+ * 初始：setup
+ * 挂载：onBeforeMount onMounted
+ * 更新：onBeforeUpdate, onUpdated
+ * 卸载：
+ */
+onBeforeMount(()=>{
+    console.log("挂在前")
+})
+onMounted(()=>{
+    console.log("挂载后")
+})
+onBeforeUpdate(()=>{
+    console.log("更新前")
+})
+onUpdated(()=>{
+    console.log("更新后")
+})
+onBeforeUnmount(()=>{
+    console.log("卸载前")
+})
+onUnmounted(()=>{
+    console.log("卸载后")
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project1/src/components/Demo16.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1 ref="part">Demo16</h1>
+    <!-- <button @click="showMain">showMain</button> -->
+    <!-- <input type="text" > -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+let part = ref();
+let a = ref(1000);
+let b = ref(10000);
+// function showMain() {
+//   console.log(part.value?.innerText);
+// }
+onMounted(()=>{
+  console.log(part.value?.innerText);
+})
+defineExpose({a,b})
+</script>
+
+<style lang="scss" scoped>
+</style>