【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 函数的组件）中封装和复用有状态的逻辑。它们可以让开发者将组件中的逻辑提取出来，使得代码更加清晰、可维护和可复用。

主要特点包括：

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

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

useDog.ts中的 hook：
- 封装数据和逻辑：在 useDog.ts 中，定义了一个函数，这个函数实际上就是一个 hook。它封装了与获取狗狗图片相关的数据（dogList）和逻辑（getDog 函数用于获取随机狗狗图片的 URL 并添加到 dogList 中）。
- 响应式数据：使用 reactive 创建了响应式的 dogList，这样当 dogList 的内容发生变化时，使用这个数据的组件会自动更新视图。
- 异步操作：getDog 函数中使用 axios 进行异步请求获取随机狗狗图片的 URL，成功后将其添加到 dogList 中，如果出现错误则弹出错误提示。
在 Person.vue 中的使用：
- 引入 hook：通过 import useDog from '@/hooks/useDog'; 引入 useDog hook。
- 解构赋值：使用解构赋值 let { dogList, getDog } = useDog(); 获取 useDog hook 中返回的 dogList 和 getDog 函数。
- 模板中使用：在模板中，使用 v-for 遍历 dogList 来展示多个狗狗图片，并且通过点击按钮触发 getDog 函数来获取新的狗狗图片，从而更新视图。