【Vue】Vue3.0（十五）Vue 3.0 中 hooks 的概念

🏡作者主页：点击！

🤖Vue专栏：点击！

⏰️创作时间：2024年10月22日21点50分

背景：在一些情况下，前台的组件是可以复用的，那这些复用的对象和数据，为了避免直接写在一个vue文件中的混乱性，我们可以为每一个类型的内容，写成一个hooks，以便后面重复利用

一、示例

App.vue

<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}

}

useDog.ts

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};
 }

Person.vue，在此vue中使用上面的两个组件；

<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>

展示效果

在这个例子中，很好地展示了 Vue 3.0 中 hooks 的概念及使用方式。

二、Vue 3.0 中 hooks 的概念

Hooks 是一组以 use 开头的函数，用于在 Vue 3 的函数式组件（使用 setup 函数的组件）中封装和复用有状态的逻辑。它们可以让开发者将组件中的逻辑提取出来，使得代码更加清晰、可维护和可复用。

主要特点包括：

1. 逻辑封装：可以将特定的业务逻辑封装在一个 hook 函数中，例如获取数据、处理状态等。
2. 可复用性：一个 hook 可以在多个组件中复用，避免了重复代码的编写。
3. 清晰的代码结构：通过将相关逻辑集中在 hook 函数中，组件的代码更加简洁明了，易于理解和维护。

在这里解释一下 例子中 hooks 的使用

1. useDog.ts中的 hook：

   • 封装数据和逻辑：在 useDog.ts 中，定义了一个函数，这个函数实际上就是一个 hook。它封装了与获取狗狗图片相关的数据（dogList）和逻辑（getDog 函数用于获取随机狗狗图片的 URL 并添加到 dogList 中）。
   • 响应式数据：使用 reactive 创建了响应式的 dogList，这样当 dogList 的内容发生变化时，使用这个数据的组件会自动更新视图。
   • 异步操作：getDog 函数中使用 axios 进行异步请求获取随机狗狗图片的 URL，成功后将其添加到 dogList 中，如果出现错误则弹出错误提示。

2. 在 Person.vue 中的使用：

   • 引入 hook：通过 import useDog from '@/hooks/useDog'; 引入 useDog hook。
   • 解构赋值：使用解构赋值 let { dogList, getDog } = useDog(); 获取 useDog hook 中返回的 dogList 和 getDog 函数。
   • 模板中使用：在模板中，使用 v-for 遍历 dogList 来展示多个狗狗图片，并且通过点击按钮触发 getDog 函数来获取新的狗狗图片，从而更新视图。

综上所述，这个例子展示了 Vue 3.0 中 hooks 的强大功能，通过封装逻辑和数据，提高了代码的可维护性和可复用性，使得组件的开发更加高效和清晰。