vue3

15.vue3/vue_project1/src/App.vue

@@ -12,12 +12,20 @@
     <Demo10/>
     <Demo11/>
     <Demo12/>
-     -->
     <Demo13/>
+     -->
+     <Demo1 />
+    <Demo14 v-if="show"/>
+    <button @click="changeMount">卸载效果</button>
   </div>
 </template>
 
 <script setup name="App">
+import {ref} from 'vue';
+let show = ref(true);
+function changeMount() {
+  show.value = false;
+}
 import Demo1 from "./components/Demo167.vue";
 import Demo2 from "./components/Demo2.vue";
 import Demo32 from "./components/Demo36.vue";
@@ -31,6 +39,7 @@ 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 Demo14 from "./components/Demo14.vue";
 </script>
 <style></style>
 

15.vue3/vue_project1/src/components/Demo13.vue

@@ -1,11 +1,45 @@
 <template>
   <div>
     <h1>生命周期</h1>
+    <p>{{ msg }}</p>
+    <button @click="changeMain">修改</button>
+    <!-- 
+        
+     -->
   </div>
 </template>
 
-<script lang="ts" setup>
-
+<script>
+    export default{
+        data() {
+            return {
+                msg:"你好"
+            }
+        },
+        methods:{
+            changeMain() {
+                this.msg = 'hello'
+            }
+        },
+        beforeCreate() {
+            console.log(this.msg,'创建前',this.changeMain,this.$el)
+        },
+        created() {
+            console.log(this.msg,'创建后',this.changeMain,this.$el)
+        },
+        beforeMount() {
+            console.log(this.msg,'挂载前',this.changeMain,this.$el)
+        },
+        mounted() {
+            console.log(this.msg,'挂载后',this.changeMain,this.$el)
+        },
+        beforeUpdate(){
+            console.log(this.msg,'更新前',this.changeMain,this.$el,document.querySelector("p").innerHTML)
+        },
+        updated() {
+            console.log(this.msg,'更新后',this.changeMain,this.$el,document.querySelector("p").innerHTML)
+        }
+    }
 </script>
 
 <style lang="scss" scoped>

15.vue3/vue_project1/src/components/Demo14.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <!-- 
+        初始：setup
+        运行：onBeforeMount,onMounted,onBeforeUpdate,onUpdated
+        卸载：
+     -->
+    <h1>生命周期</h1>
+    {{ msg }}
+    <button @click="changeMain">更新</button>
+  </div>
+</template>
+
+<script setup>
+import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';
+let msg = ref("你好")
+function changeMain() {
+    msg.value = 'hello'
+}
+onBeforeMount(()=>{
+    console.log(msg.value,'挂载前')
+})
+console.log(msg.value,'初始化')
+onMounted(()=>{
+    console.log(msg.value,'挂载后')
+})
+onBeforeUpdate(()=>{
+    console.log(msg.value,'更新前')
+})
+onUpdated(()=>{
+    console.log(msg.value,'更新后')
+})
+
+onBeforeUnmount(()=>{
+    console.log(msg.value,'卸载前')
+})
+onUnmounted(()=>{
+    console.log(msg.value,'卸载后')
+})
+
+</script>
+
+<style lang="scss" scoped>
+</style>