vue3

13.Vue3/project2/src/App.vue

@@ -13,10 +13,13 @@
     <Demo10/>
     <Demo11/>-->
     <Demo12/>
+    <Demo13 v-if='show'/>
   </div>
 </template>
 
 <script setup name="App">
+import {ref} from 'vue';
+let show = ref(true)
 // import Demo1 from './components/Demo1.vue'
 // import Demo2 from './components/Demo2.vue'
 // import Demo3 from './components/Demo3.vue'
@@ -29,6 +32,7 @@ import Demo9 from './components/Demo9.vue'
 import Demo10 from './components/Demo10.vue'
 import Demo11 from './components/Demo11.vue'
 import Demo12 from './components/Demo12.vue'
+import Demo13 from './components/Demo13.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

13.Vue3/project2/src/components/Demo13.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <h1>生命周期</h1>
+    <p>{{ msg }}</p>
+    <button @click="changeMain">更改</button>
+    
+  </div>
+  
+</template>
+
+
+<script setup> 
+/**
+ * vue2生命周期三个阶段
+ * 初始：beforeCreate created
+ * 运行：beforeMount mounted beforeUpdate updated
+ * 销毁：beforeDestroy destroyed
+ * 
+ * vue3生命周期
+ * 初始：setup
+ * 运行：
+ *  挂载：onBeforeMount onMounted
+ *  更新：onBeforeUpdate onUpdated
+ * 卸载: onBeforeUnMount onUnMounted
+ */
+
+ import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';
+
+let msg = ref("哈哈")
+
+function changeMain() {
+    msg.value = '嘻嘻'
+}
+ onBeforeMount(()=>{
+    console.log("挂载前")
+ }) 
+
+
+
+ onMounted(()=>{
+    console.log("挂载后")
+ })
+
+ onBeforeUpdate(()=>{
+    console.log("onBeforeUpdate")
+ }) 
+
+
+
+ onUpdated(()=>{
+    console.log("onUpdated")
+ })
+
+ onBeforeUnmount(()=>{
+    console.log("onBeforeUnMount")
+ }) 
+
+
+
+ onUnmounted(()=>{
+    console.log("onUnMounted")
+ })
+
+
+
+
+
+
+
+
+
+
+
+
+
+// export default {
+// //   data() {
+// //     return {
+// //       msg: "你好",
+// //     };
+// //   },
+// //   beforeCreate() {
+// //     console.log("创建前");
+// //   },
+// //   created() {
+// //     console.log("创建后");
+// //   },
+// //   beforeMount() {
+// //     console.log("挂载前", this.$el, document.querySelector("p"));
+// //   },
+// //   mounted() {
+// //     console.log("挂载后", this.$el, document.querySelector("p"));
+// //   },
+// //   beforeUpdate() {
+// //     console.log("更新前", this.$el, document.querySelector("p").innerText);
+// //   },
+// //   updated() {
+// //     console.log("更新后", this.$el, document.querySelector("p").innerText);
+// //   },
+// //   beforeDestroy() {
+// //     console.log("销毁前");
+// //   },
+// //   destroyed() {
+// //     console.log("销毁后");
+// //   },
+// //   methods: {
+// //     changeMain() {
+// //       this.msg = "哈哈哈";
+// //     },
+// //   },
+
+//   setup() {
+//         return {
+
+//         }
+//     },
+// };
+</script>
+
+<style lang="scss" scoped></style>