一:基础概念
组合式函数是指利用组合式API封装和复用携带状态的逻辑的函数(感觉有点像mixin,因为它会携带状态)
命名规则:use开头,中间小驼峰。eg:useChangeNum
组合式 API
名字的由来:一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样,用多个较小且逻辑独立的单元来组合形成复杂的逻辑。实际上,这正是为什么我们决定将实现了这一设计模式的 API 集合命名为组合式API
分类:
①无状态逻辑函数:函数在接收一些输入后立刻返回所期望的输出,常见的复用无状态 逻辑的库有:lodash
、date-fns
说白了:函数负责接收数据,返回数据
②有状态逻辑函数:负责管理会随时间而变化的状态
说白了:函数内部定义数据,内部处理出数据处理的逻辑,返回数据
二:基础代码示例
描述:图片跟随鼠标移动
//文件:src/composables/usemouse.ts
import { onMounted, ref } from 'vue';
export function useMouse(){
// 接收鼠标位置
const x=ref(0)
const y=ref(0)
function getMouse(e:MouseEvent){
x.value=e.pageX
y.value=e.pageY
}
onMounted(()=>{
window.addEventListener('mousemove',getMouse)
})
return {x,y}
}
//文件:src/views/flydog.vue
<template>
<img
:style="{left: x+'px',top:y+'px'}"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F11%2F20200711132147_Ld4Ew.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1694154357&t=aa4d57b59c287ddbbfd7da9fe60b04bb" alt="">
</template>
<script lang="ts" setup>
import { useMouse } from '@/Composables/useMouse';
const {x,y}=useMouse()
</script>
<script lang="ts">
export default {
name: 'VFlayDog'
}
</script>
<style lang="scss" scoped>
img{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
三:组合式函数封装异步状态(带参数)
描述:将一个图片接口封装成一个组合式函数,调用时需要提供地址和方式两种参数,获取到地址、响应状态和错误信息这三个数据
//文件:src/composables/fetch.ts
import axios from 'axios'
import { ref } from 'vue'
// 封装一个请求的组合式函数
export default function useFetch(url:string,method:string){
const res=ref()
const loading=ref(true)
const errMsg=ref()
axios({
url,
method
}).then((data)=>{
console.log(data)
loading.value=false
res.value=data.data
}).catch((err)=>{
loading.value=false
errMsg.value=err||"未知错误"
})
return {res,loading,errMsg}
}
//文件:src/views/dogfetch.vue
<template>
<h3 v-if="loading">数据加载中</h3>
<div v-if="res?.message">
<img :src="res?.message" alt="">
</div>
<h3>{{ errMsg }}</h3>
</template>
<script lang="ts" setup>
//这里引入的时候别加ts后缀,不然可能有报错
import useFetch from "@/Composables/fetch"
let {res,loading,errMsg}=useFetch('https://dog.ceo/api/breeds/image/random', 'get')
</script>
<script lang="ts">
export default {
name: 'VDogFetch'
}
</script>
<style lang="scss" scoped></style>