ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue3：自界说hooks，实现逻辑代码封装，加强代码的复用性和可维护性（axios [打印本页]
作者: 小秦哥    时间: 2024-8-25 11:24
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4