vue3的生命周期

20_脚手架/vue3_test/11.src_vue3的生命周期/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/11.src_vue3的生命周期/components/demo.vue

@@ -0,0 +1,76 @@
+<template>
+  <h2>当前求和为：{{ sum }}</h2>
+  <button @click="sum++">点击+1</button>
+</template>
+
+<script>
+import {ref, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    console.log("___setup___")
+    let sum = ref(0)
+
+    // 通过组合API的形式的生命周期钩子
+
+    onBeforeMount(()=>{
+      console.log("___onBeforeMount___")
+    })
+    onMounted(()=>{
+      console.log("___onMounted___")
+    })
+    onBeforeUpdate(()=>{
+      console.log("___onBeforeUpdate___")
+    })
+    onUpdated(()=>{
+      console.log("___onUpdated___")
+    })
+    onBeforeUnmount(()=>{
+      console.log("___onBeforeUnmount___")
+    })
+    onUnmounted(()=>{
+      console.log("___onUnmounted___")
+    })
+
+    return {
+      sum
+    }
+  },
+
+  // // 通过配置项的形式使用生命周期
+  // beforeCreate() {
+  //   console.log('---beforeCreate---')
+  // },
+  //
+  // created() {
+  //   console.log("---created---")
+  // },
+  //
+  // beforeMount() {
+  //   console.log("---beforeMount---")
+  // },
+  //
+  // mounted() {
+  //   console.log("---mounted---")
+  // },
+  //
+  // beforeUpdate() {
+  //   console.log("---beforeUpdate---")
+  // },
+  //
+  // updated() {
+  //   console.log("---updated---")
+  // },
+  //
+  // beforeUnmount() {
+  //   console.log("---beforeUnmount---")
+  // },
+  //
+  // unmounted() {
+  //   console.log("---unmounted---")
+  // }
+
+}
+</script>

20_脚手架/vue3_test/11.src_vue3的生命周期/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/App.vue

@@ -1,13 +1,22 @@
 <template>
-  <Demo/>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
 </template>
 
 <script>
-import {reactive} from "vue";
+import {ref} from "vue";
 import Demo from "@/components/demo.vue";
 
 export default {
   name: 'App',
   components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
 }
 </script>

20_脚手架/vue3_test/src/components/demo.vue

@@ -1,54 +1,76 @@
 <template>
   <h2>当前求和为：{{ sum }}</h2>
   <button @click="sum++">点击+1</button>
-  <hr>
-  <h2>当前信息为：{{ msg }}</h2>
-  <button @click="msg+='!'">修改信息</button>
-  <hr>
-  <h2>姓名：{{ person.name }}</h2>
-  <h2>年龄：{{ person.age }}</h2>
-  <h2>薪资：{{ person.job.j1.salary }}</h2>
-  <button @click="person.name+='~'">修改姓名</button>
-  <button @click="person.age++">修改年龄</button>
-  <button @click="person.job.j1.salary++">修改薪资</button>
-  <h2></h2>
 </template>
 
 <script>
-import {reactive, ref, watch, watchEffect} from "vue";
+import {ref, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
 
 export default {
   name: 'Demo',
 
   setup() {
+    console.log("___setup___")
     let sum = ref(0)
-    let msg = ref('你好呀')
-    let person = reactive({
-      name: '张三',
-      age: 18,
-      job: {
-        j1: {
-          salary: 20
-        }
-      }
-    })
 
-    // 方法一： ref的对象监视，通过value实现
+    // 通过组合API的形式的生命周期钩子
-    // watch(person, (newValue, oldValue) => {
-    //   console.log('person的值变了', newValue, oldValue)
-    // })
 
-    watchEffect(() => {
+    onBeforeMount(()=>{
-      const x1 = sum.value
+      console.log("___onBeforeMount___")
-      const x2 = person.job.j1.salary
+    })
-      console.log('watchEffect所指定的回调执行了')
+    onMounted(()=>{
+      console.log("___onMounted___")
+    })
+    onBeforeUpdate(()=>{
+      console.log("___onBeforeUpdate___")
+    })
+    onUpdated(()=>{
+      console.log("___onUpdated___")
+    })
+    onBeforeUnmount(()=>{
+      console.log("___onBeforeUnmount___")
+    })
+    onUnmounted(()=>{
+      console.log("___onUnmounted___")
     })
 
     return {
-      sum,
+      sum
-      msg,
-      person
     }
-  }
+  },
+
+  // // 通过配置项的形式使用生命周期
+  // beforeCreate() {
+  //   console.log('---beforeCreate---')
+  // },
+  //
+  // created() {
+  //   console.log("---created---")
+  // },
+  //
+  // beforeMount() {
+  //   console.log("---beforeMount---")
+  // },
+  //
+  // mounted() {
+  //   console.log("---mounted---")
+  // },
+  //
+  // beforeUpdate() {
+  //   console.log("---beforeUpdate---")
+  // },
+  //
+  // updated() {
+  //   console.log("---updated---")
+  // },
+  //
+  // beforeUnmount() {
+  //   console.log("---beforeUnmount---")
+  // },
+  //
+  // unmounted() {
+  //   console.log("---unmounted---")
+  // }
+
 }
 </script>