vue3

vue3/project3/src/App.vue

@@ -11,7 +11,8 @@
     <Demo7></Demo7>
     <Demo8></Demo8>
     <Demo9></Demo9> -->
-     <Demo12></Demo12>
+     <!-- <Demo14 v-if="isshow"></Demo14> -->
+     <Demo15></Demo15>
     <!-- <Demo10></Demo10>
     <Demo11></Demo11>
     <Demo12></Demo12>
@@ -37,6 +38,7 @@ export default {
 </script> -->
 
 <script setup>
+import { ref } from "vue";
 import Demo1 from "./components/Demo1.vue";
 import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
@@ -50,6 +52,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 Demo14 from './components/Demo14.vue';
+import Demo15 from './components/Demo15.vue';
+let isshow  = ref(true);
 </script>
 <style>
 </style>

vue3/project3/src/components/Demo14.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <h1>生命周期</h1>
+    {{a}}
+    <!-- 
+        vue2生命周期
+        三个阶段：
+        初始化：    
+            beforeCreate
+            created
+        运行:
+            beforeMount mounted
+            beforeUpdate updated
+        销毁:
+            beforeDestory destoryed
+    -->
+    <!-- 
+        vue3生命周期
+        初始：setup
+        运行：
+            挂载:onBeforeMount onMounted
+            更新:onBeforeUpdate onUpdated
+        卸载：
+            onBeforeUnmount onUnmounted
+    -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue" 
+let a = ref("哈哈")
+onMounted(()=>{
+    console.log("1")
+})
+onBeforeMount(()=>{
+    console.log("2")
+})
+onBeforeUpdate(()=>{
+    console.log("3")
+})
+onUpdated(()=>{
+    console.log("4")
+})
+onBeforeUnmount(()=>{
+    console.log("5")
+})
+onUnmounted(()=>{
+    console.log("6")
+})
+
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo15.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h1>生命周期</h1>
+    <div class="main">{{aa}}</div>
+    <button @click="changeMain">修改</button>
+    <!-- 
+        vue2生命周期
+        三个阶段：
+        初始化：    
+            beforeCreate 创建前 方法methods与数据data都是无法访问的
+            created 创建后  方法methods与数据data都是可以访问的
+        运行:
+            beforeMount 挂载前 页面没有真实渲染dom 无法进行dom操作
+            mounted 挂载后 页面真实渲染dom 可以进行dom操作
+            beforeUpdate 更新前 数据变化 视图未变
+            updated 更新后 数据变化 视图改变
+        销毁:
+            beforeDestory 销毁前 对DOM操作已经无效
+            destoryed 销毁后 触底销毁
+    -->
+    <!-- 
+        vue3生命周期
+        初始：setup
+        运行：
+            挂载:onBeforeMount onMounted
+            更新:onBeforeUpdate onUpdated
+        卸载：
+            onBeforeUnmount onUnmounted
+    -->
+  </div>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                aa:1
+            }
+        },
+        methods:{
+            changeMain() {
+                this.aa = '哈哈';
+            }
+        },
+        beforeCreate() {
+            console.log("创建前",this.aa)
+        },
+        created() {
+            console.log("创建后",this.aa)
+        },
+        beforeMount() {
+            console.log("挂载前",this.aa,document.querySelector(".main"))
+        },
+        mounted() {
+            console.log("挂载后",this.aa,document.querySelector(".main"))
+        },
+        beforeUpdate(){
+            console.log("更新前",document.querySelector(".main").innerHTML,this.$el)
+        },
+        updated() {
+            console.log("更新后",document.querySelector(".main").innerHTML,this.$el)
+        },
+        beforeDestory() {
+            // clearInterval()
+            console.log("销毁前")
+        },
+        destoryed(){
+            // clearInterval()
+            console.log("销毁后")
+        }
+
+    }
+</script>
+<style lang="scss" scoped>
+</style>