引言
Vue3引入了组合式API,使得代码逻辑更自由、灵活。其中自定义Hooks能让我们将客服用的逻辑抽离成一个独立的函数,以实现在多个组件中复用的目的。可以简单理解成封装成一个模块,以方便其他地方调用。
实现
自定义hooks
useDog
import axios from "axios";
import { reactive } from "vue";
export default function(){
// 数据
let dogList = reactive([
"https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg",
]);
// 方法
async function getDogList() {
try {
debugger;
let result = await axios.get("https://dog.ceo/api/breed/pembroke/images/random");
console.log(result.data.message);
dogList.push(result.data.message);
} catch (error) {
console.log(error);
}
}
// 返回数据和方法
return {
dogList,
getDogList
}
}
useNum
import { ref } from 'vue'
export default function(){
// 数据
let num = ref(0)
// 自增方法
function increment() {
num.value++
}
// 自减方法
function decrement() {
num.value--
}
// 返回数据和方法
return {
num,
increment,
decrement
}
}
使用Hooks
<script lang="ts" setup name="App">
import useDog from '@/hooks/useDog'
import useNum from './hooks/useNum';
let {dogList, getDogList} = useDog()
let {num, increment, decrement} = useNum()
</script>
<template>
<div class="container">
现在的值是: {{ num }}
<button class="button" @click="increment">+</button>
<button class="button" @click="decrement">-</button>
<img v-for="(item,index) in dogList" :src="item" :key="index" />
<button class="button" @click="getDogList">新增一条狗</button>
</div>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column; /* 垂直排列 */
align-items: center; /* 居中对齐 */
padding: 20px; /* 内边距 */
background-color: #f9f9f9; /* 背景颜色 */
border-radius: 10px; /* 圆角 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
.button {
background-color: #4CAF50; /* 按钮背景颜色 */
color: white; /* 按钮文字颜色 */
border: none; /* 去掉边框 */
padding: 10px 20px; /* 内边距 */
margin: 5px 0; /* 上下间距 */
border-radius: 5px; /* 圆角 */
cursor: pointer; /* 鼠标指针样式 */
transition: background-color 0.3s; /* 背景颜色渐变效果 */
}
.button:hover {
background-color: #45a049; /* 悬停时背景颜色 */
}
img {
width: 200px; /* 图片宽度 */
margin: 10px; /* 图片的上下左右间距 */
border-radius: 10px; /* 图片圆角 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 图片阴影效果 */
}
</style>
实现效果
书写规范
- 命名规范:自定义Hooks应该以“use”为前缀,以区分其他函数和变量。例如:useUserInfo、useMousePosition等。同时,命名应清晰明了,准确描述Hooks的功能。
- 参数与返回值:自定义Hooks应该接收明确的参数,并返回需要在组件中使用的响应式数据、方法、计算属性等。返回的对象应该具有清晰的属性名和结构。