vue3

12.vue3/project1/src/App.vue

@@ -1,18 +1,19 @@
 <template>
   <div>
-    <Demo13 x="你好" :open="showList"></Demo13>
-    <hr><hr><hr>
-    <!-- <Demo12></Demo12>
-    <hr><hr><hr> -->
-    <!-- <Demo11></Demo11>
-    <hr><hr><hr> -->
-    <!-- <Demo10></Demo10>
+    <Demo14 v-if="isShow"></Demo14>
+    <!-- <Demo13 x="你好" :open="showList"></Demo13>
     <hr><hr><hr> -->
-    <!-- <Demo9></Demo9>
+    <!-- <Demo12></Demo12>
+    <hr><hr><hr> 
+    <Demo11></Demo11>
+    <hr><hr><hr> 
+    <Demo10></Demo10>
+    <hr><hr><hr> 
+    <Demo9></Demo9>
     <hr><hr><hr>
     <Demo8></Demo8>
-    <hr><hr><hr> -->
-    <!-- <Demo7></Demo7>
+    <hr><hr><hr> 
+    <Demo7></Demo7>
     <hr><hr><hr>
     <Demo6></Demo6>
     <hr><hr><hr>
@@ -24,7 +25,7 @@
     <hr><hr><hr>
     <Demo4></Demo4>
     <hr><hr><hr>
-    <Demo5></Demo5> -->
+    <Demo5></Demo5>  -->
   </div>
 </template>
 
@@ -42,8 +43,9 @@ import Demo10 from './components/Demo10.vue';
 import Demo11 from './components/Demo11.vue';
 import Demo12 from './components/Demo12.vue';
 import Demo13 from './components/Demo13.vue';
-import { reactive } from 'vue';
-
+import Demo14 from './components/Demo14.vue';
+import {ref, reactive } from 'vue';
+let isShow = ref(true);
 let showList = reactive([
    {
     name: 12,

12.vue3/project1/src/components/Demo14.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="demo14">
+    <h1>生命周期</h1>
+    <div id="box">{{ a }}</div>
+    <button @click="changeMain">修改</button>
+  </div>
+</template>
+<!-- 
+    vue2:
+        初始：
+            beforeCreate created
+        运行: 
+            挂载：beforeMount mounted
+            更新: beforeUpdate updated
+        销毁:
+            beforeDestory destoryed
+    vue3:
+        初始：
+            setup
+        运行: 
+            挂载：onBeforeMount onMounted
+            更新: beforeUpdate updated
+        卸载:
+            onBeforeUnmount onUnmounted
+
+    
+-->
+<script lang="ts" setup>
+import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue" 
+let a = ref(1);
+function changeMain() {
+    a.value = 12;
+}
+onMounted(()=>{
+    console.log("挂载后",document.getElementById("demo14"));
+})
+
+onBeforeMount(()=>{
+    console.log("挂载前",document.getElementById("demo14"));
+})
+onBeforeUpdate(()=>{
+    console.log("更新前",document.getElementById("box")?.innerHTML);
+})
+
+onUpdated(()=>{
+    console.log("更新后",document.getElementById("box")?.innerHTML);
+})
+onBeforeUnmount(()=>{
+    console.log("卸载前");
+})
+
+onUnmounted(()=>{
+    console.log("卸载后");
+})
+</script>
+
+<style lang="scss" scoped>
+</style>