vue3

17.Vue3/project/src/App.vue

@@ -28,6 +28,12 @@ export default {
 <template>
   <div>
     <h1>首页</h1>
+    <Demo12 v-if="isShow"></Demo12>
+    <hr>
+    <hr>
+    <Demo11></Demo11>
+    <hr>
+    <hr>
     <Demo10></Demo10>
     <hr>
     <hr>
@@ -60,6 +66,7 @@ export default {
 </template>
 
 <script lang="ts" setup>
+import {ref} from 'vue';
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
@@ -70,12 +77,14 @@ import Demo7 from './components/Demo7.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';
 // export default {
 //   // components:{
 //   //   Demo1
 //   // }
 // }
-
+let isShow = ref(true)
 </script>
 
 <style lang="scss" scoped>

17.Vue3/project/src/components/Demo11.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <h1>Vue2生命周期</h1>
+    <p id="msg1">{{ msg }}</p>
+    <button @click="changeMsg">修改消息</button>
+  </div>
+</template>
+
+<!-- <script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script> -->
+<!-- 
+    vue2生命周期:
+    1.初始阶段
+        创建前 beforeCreate  方法和数据都不可以调用
+        创建后 created 方法和数据都可以调用
+    2.运行阶段
+        挂载前 beforeMount 页面没有被挂载
+        挂载后 mounted 页面挂载
+        更新前 beforeUpdate 方法和数据没有真实更新到页面上
+        更新后 updated 方法和数据真实更新到页面上
+    3.销毁阶段
+        销毁前 beforeDestroy 方法和数据没有真实销毁
+        销毁后 destroyed 方法和数据真实销毁
+-->
+<script>
+    export default {
+        data() {
+            return {
+                msg:"星期日"
+            }
+        },
+        beforeCreate() {
+            // console.log(this.msg,'beforecreate');
+            // console.log(this.init(),'beforecreate');
+        },
+        created() {
+            // console.log(this.init(),'created');
+            // console.log(this.msg,'created');
+
+        },
+        beforeMount() {
+            // console.log(this.msg,'beforeMounte',this.$el);
+
+        },
+        mounted() {
+            // console.log(this.msg,'mounted',this.$el);
+
+        },
+        beforeUpdate() {
+
+            console.log(this.msg,'beforeUpdate',document.getElementById("msg1").innerHTML);
+        },
+        updated() {
+
+            console.log(this.msg,'updated',document.getElementById("msg1").innerHTML);
+        },
+        beforeDestroy() {},
+        destroyed() {},
+        methods:{
+            init() {
+                console.log("初始化的方法")
+            },
+            changeMsg() {
+                this.msg = '哈哈';
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/components/Demo12.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h1>Vue3生命周期</h1>
+    <p id="msg1">{{ msg }}</p>
+    <!-- <button @click="changeMsg">修改消息</button> -->
+  </div>
+</template>
+<!-- 
+    vue3生命周期
+    初始：setup
+    运行：onBeforeMount onMounted onBeforeUpdate onUpdated
+    卸载：onBeforeUnmount onUnmounted
+-->
+<script lang="ts" setup>
+import {ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue" 
+let msg = ref("121");
+console.log(msg.value);
+onBeforeMount(()=>{
+    console.log(msg.value,'创建前')
+})
+onMounted(()=>{
+    console.log(msg.value,'创建后')
+})
+onBeforeUpdate(()=>{
+    console.log(msg.value,'更新前')
+})
+onUpdated(()=>{
+    console.log(msg.value,'更新后')
+})
+onBeforeUnmount(()=>{
+    console.log('卸载前')
+})
+onUnmounted(()=>{
+    console.log('卸载后')
+})
+
+</script>
+<style lang="scss" scoped>
+</style>