Vue 3.0 中 hooks 的概念示例详解

<template>
  <Person/>
</template>
<script lang="ts" setup name="App"> //当前根组件的组件名
import Person from './components/Person.vue'
</script>
<style >
.app {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
**useSum.ts**
```html
import {ref,reactive, computed} from 'vue'
import axios from 'axios' 
export default function(){
let sum =ref(0);
let bigSum =computed(()=>{
    return sum.value*10;
})
function addSum(){
    sum.value+=1;
}
return {sum,addSum,bigSum}
}

import {ref,reactive} from 'vue'
import axios from 'axios' 
 export default function(){
let dogList = reactive([
    'https://images.dog.ceo//breeds//pembroke//n02113023_11091.jpg'
]);
async function getDog(){
    try{
        let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
        dogList.push(result.data.message)
    }catch(error){
        alert(error);
    }
}
    return {dogList,getDog};
 }

<template>
    <div class="person">
      <h2>求和：{{sum}}====bigSum:{{bigSum}}</h2>
      <button @click="addSum">和加一</button>
      <hr/>
      <img v-for="(dog,index) in dogList" :key="index" :src="dog"><br/>
      <button @click="getDog"> 点我换小狗</button>
    </div>
</template>
<script lang="ts" setup name="Person">
import useDog from '@/hooks/useDog';
import useSum from '@/hooks/useSum';
let {dogList,getDog} = useDog();
let {sum,addSum,bigSum} = useSum();
</script>
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
li {
    font: 1em sans-serif;
}
img {
    height: 100px;
    margin-right: 10px;
}
</style>