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

import {reactive,onMounted} from 'vue' import axios from 'axios' export default function (){ // 数据 let dogList = reactive([ 'https://images.dog.ceo/breeds/pembroke/n02113023_4373.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) } } // 钩子 onMounted(()=>{ getDog() }) // 向外部提供东西 return {dogList,getDog} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

useSum.ts

import { ref ,onMounted,computed} from 'vue' export default function () { // 数据 let sum = ref(0) let bigSum = computed(()=>{ return sum.value * 10 }) // 方法 function add() { sum.value += 1 } // 钩子 onMounted(()=>{ add() }) // 给外部提供东西 return {sum,add,bigSum} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

2、使用hook

Person.vue
在person组件中使用hook

<template> <div className="person"> <h2>当前求和为：{{ sum }}，放大10倍后：{{ bigSum }}h2> <button @click="add">点我sum+1button> <hr> <img v-for="(dog,index) in dogList" :src="dog" :key="index"> <br> <button @click="getDog">再来一只小狗button> div> template> <script lang="ts" setup name="Person"> import useSum from '@/hooks/useSum' import useDog from '@/hooks/useDog' const {sum, add, bigSum} = useSum() const {dogList, getDog} = useDog() script> <style scoped> .person { background-color: skyblue; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } button { margin: 0 5px; } li { font-size: 20px; } img { height: 100px; margin-right: 10px; } style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

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