029:尚硅谷自定义Hooks学习示例

src/App.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="app">
         <h1>Hello World,你好呀!</h1>
-        <Person v-if="isShow"/>
-
+       <Person />
     </div>
 
 
@@ -12,11 +11,7 @@
     <script setup lang="ts">
     import Person from './components/Person.vue';
 
-    import { ref, onMounted } from 'vue';
-    let isShow = ref(true);
-    onMounted(()=>{
-        console.log('fu---挂载成功');
-    })
+
         
     </script>
 

src/components/Person.vue

@@ -1,8 +1,12 @@
 <template>
 <div class="person">
-<h1>ref属性标签示例</h1>
-<h2>Sun:{{Sun}}</h2>
+<h1>自定义Hooks示例</h1>
+<h2>Sun:{{Sun}}放大十倍的数字:{{ bigSun }}</h2>
 <button @click="addSun">Sun++</button>
+<hr>
+<img v-for="(dog,index) in dogList" :src="dog" :ker="index">
+<br>
+<button @click="getDog">getDog</button>
 
 
 
@@ -14,37 +18,11 @@
     </template>
     
     <script setup lang="ts">
-    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('卸载完毕');
-    })
+    import useSun from '@/hooks/useSun';
+    import useDog from '@/hooks/useDog';
+    const {Sun,addSun,bigSun} = useSun();
+    const {dogList,getDog} = useDog();
+
 
 
     
@@ -67,12 +45,23 @@
             border-radius: 10px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             width: 80%;
-            margin: 0 auto;
+            height: 20%;
+            margin: 30px auto;
         }
         button{
             background-color: #313633;
             color: #15d11f;
-            margin: 0 10px;         
+            margin: 0 10px;
+            width: 100px;
+            height: 30px;
+            border-radius: 5px;
+            border: none;
+                     
+        }
+        img{
+            margin: 15px;
+            width: 180px;
+            height: 200px;
         }
 
     </style>

src/hooks/useDog.ts

@@ -0,0 +1,27 @@
+import { reactive, onMounted } from 'vue';
+    import axios from 'axios';
+    
+
+    export default function useDog(){
+        let dogList = reactive([
+        'https://images.dog.ceo/breeds/schnauzer-giant/n02097130_3891.jpg'
+    ])
+
+
+    async function getDog(){
+        try{
+        let result = await axios.get('https://dog.ceo/api/breeds/image/random')
+        dogList.push(result.data.message)
+        }catch(err){
+            alert('获取失败'+err)
+        }
+    }
+        onMounted(()=>{
+            getDog()
+        })
+        return{
+           
+            dogList, getDog
+        }
+    }
+    

src/hooks/useSun.ts

@@ -0,0 +1,17 @@
+import { ref,computed } from 'vue';
+
+
+
+    export default function useSun(){
+    let Sun = ref(0);
+    let bigSun = computed(()=>{
+        return Sun.value * 10;
+    })
+
+    function addSun(){
+        Sun.value += 10;
+    }
+        return{
+            Sun, addSun, bigSun
+        }
+    }