028:尚硅谷vue3的生命周期学习示例

src/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="app">
         <h1>Hello World,你好呀!</h1>
-        <Person :list="personsList"/>
+        <Person v-if="isShow"/>
 
     </div>
 
@@ -11,17 +11,12 @@
 
     <script setup lang="ts">
     import Person from './components/Person.vue';
-        import { type Persons } from '@/types'
-        import { reactive } from 'vue';
-
-        let personsList = reactive<Persons>([
-            { name: '张三', age: 20,id:'sdadfgagfs01' },
-            { name: '李四', age: 21,id:'sdadfgagfs02' },
-            { name: '王五', age: 22,id:'sdadfgagfs03' },
-            { name: '赵六', age: 23,id:'sdadfgagfs04' },
-            { name: '田七', age: 24,id:'sdadfgagfs05' },
-        ])
 
+    import { ref, onMounted } from 'vue';
+    let isShow = ref(true);
+    onMounted(()=>{
+        console.log('fu---挂载成功');
+    })
         
     </script>
 

src/components/Person.vue

@@ -1,14 +1,8 @@
 <template>
 <div class="person">
 <h1>ref属性标签示例</h1>
-<button @click="log">输出接收到的对象</button>
-<ul>
-    <li v-for="item in list" :key="item.id">
-        <span>{{item.name}}</span>
-        <span>-----{{item.age}}</span>
-        <span>-----{{item.id}}</span>
-    </li>
-</ul>
+<h2>Sun:{{Sun}}</h2>
+<button @click="addSun">Sun++</button>
 
 
 
@@ -20,14 +14,39 @@
     </template>
     
     <script setup lang="ts">
-    
-    import type { Persons } from '@/types';
-import { defineProps } from 'vue';
-
-    withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{name:'张三',age:20,id:'sdadfgagfs01'}]})
-    function log(){
-        console.log('接收到的对象:');
+    import { ref,onBeforeMount, onMounted,onBeforeUpdate,onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
+    let Sun = ref(0);
+    function addSun(){
+        Sun.value += 10;
     }
+    //创建
+    console.log('创建成功');
+    //挂载前
+    onBeforeMount(()=>{
+        console.log('挂载前');
+    })
+    //挂载完毕
+    onMounted(()=>{
+        console.log('挂载成功');
+    })
+    //更新前
+    onBeforeUpdate(()=>{
+        console.log('更新前');
+    })
+    //更新完毕
+    onUpdated(()=>{
+        console.log('更新完毕');
+    })
+    //卸载前
+    onBeforeUnmount(()=>{
+        console.log('卸载前');
+    })
+    //卸载完毕
+    onUnmounted(()=>{
+        console.log('卸载完毕');
+    })
+
+
     
 
     </script>