引言
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应该接收明确的参数，并返回需要在组件中使用的响应式数据、方法、计算属性等。返回的对象应该具有清晰的属性名和结构。
