一、情景说明
在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}
}
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}
}
2、使用hook
Person.vue
在person
组件中使用hook
<template>
<div className="person">
<h2>当前求和为:{{ sum }},放大10倍后:{{ bigSum }}</h2>
<button @click="add">点我sum+1</button>
<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>
经过案例的练习,我们可以明显的感觉到,Vue3
的hook
和Vue2
的mixin
作用非常相似
在语法上有较大差异。