Vue3：自界说hooks，实现逻辑代码封装，加强代码的复用性和可维护性（axios ...

一、情形阐明

在Vue2中，我们想要实现代码的封装与复用性，采用的技能是mixin。
mixin技能案例演示：https://blog.csdn.net/Brave_heart4pzj/article/details/135483606
而在Vue3中，我们则使用hooks来实现这个结果。
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API举行了封装
我们可以用js文件或者ts文件来封装
hook的命名规范：useXxxx
二、案例

1、创建hook

useDog.ts
使用axios请求接口，获取数据，并使用了生命周期函数onMounted

1. import {reactive,onMounted} from 'vue'
2. import axios from 'axios'
4. export default function (){
5.   // 数据
6.   let dogList = reactive([
7.     'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'
8.   ])
9.   // 方法
10.   async function getDog(){
11.     try {
12.       let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
13.       dogList.push(result.data.message)
14.     } catch (error) {
15.       alert(error)
16.     }
17.   }
18.   // 钩子
19.   onMounted(()=>{
20.     getDog()
21.   })
22.   // 向外部提供东西
23.   return {dogList,getDog}
24. }

复制代码

useSum.ts

1. import { ref ,onMounted,computed} from 'vue'
3. export default function () {
4.   // 数据
5.   let sum = ref(0)
6.   let bigSum = computed(()=>{
7.     return sum.value * 10
8.   })
10.   // 方法
11.   function add() {
12.     sum.value += 1
13.   }
15.   // 钩子
16.   onMounted(()=>{
17.     add()
18.   })
20.   // 给外部提供东西
21.   return {sum,add,bigSum}
22. }

复制代码

2、使用hook

Person.vue
在person组件中使用hook

1. <template>
2.     <div className="person">
3.         <h2>当前求和为：{{ sum }}，放大10倍后：{{ bigSum }}</h2>
4.         <button @click="add">点我sum+1</button>
5.         <hr>
6.         <img v-for="(dog,index) in dogList" :src="dog" :key="index">
7.         <br>
8.         <button @click="getDog">再来一只小狗</button>
9.     </div>
10. </template>
12. <script lang="ts" setup name="Person">
13.     import useSum from '@/hooks/useSum'
14.     import useDog from '@/hooks/useDog'
16.     const {sum, add, bigSum} = useSum()
17.     const {dogList, getDog} = useDog()
18. </script>
20. <style scoped>
21.     .person {
22.         background-color: skyblue;
23.         box-shadow: 0 0 10px;
24.         border-radius: 10px;
25.         padding: 20px;
26.     }
28.     button {
29.         margin: 0 5px;
30.     }
32.     li {
33.         font-size: 20px;
34.     }
36.     img {
37.         height: 100px;
38.         margin-right: 10px;
39.     }
40. </style>

复制代码

经过案例的练习，我们可以明显的感觉到，Vue3的hook和Vue2的mixin作用非常相似
在语法上有较大差异。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。