vue3自定义hooks

引言

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>

实现效果

书写规范

1. 命名规范：自定义Hooks应该以“use”为前缀，以区分其他函数和变量。例如：useUserInfo、useMousePosition等。同时，命名应清晰明了，准确描述Hooks的功能。
2. 参数与返回值：自定义Hooks应该接收明确的参数，并返回需要在组件中使用的响应式数据、方法、计算属性等。返回的对象应该具有清晰的属性名和结构。

原文地址：https://blog.csdn.net/weixin_46515691/article/details/142422526

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！