详解Vue 自定义hook 函数

目录
  • 定义
  • 使用
  • 封装发ajax请求的hook函数(ts版本)

定义

什么是hook?

  • 本质是一个函数,把 setup 函数中使用的 Composition API (组合API)进行了封装
  • 类似于 vue2.x 中的 mixin

自定义 hook 的优势:

  • 复用代码,让 setup 中的逻辑更清楚易懂

使用

首先我们做一个功能,鼠标点击屏幕,获取坐标:

详解Vue自定义hook函数

<template>
  <h2>当前鼠标的坐标是:x:{{ point.x }},y:{{ point.y }}</h2>
</template>
<script>
import {onMounted,>编程客栈
    }
   >import {onBeforeUnmount,>......
export default function() {
    ......
}

在 Demo.vue 中使用:

<template>
  <h2>当前鼠标的坐标是:x:{{ point.x }},y:{{ point.y }}</h2>
</template>
<script>
import usePoint from "@/hooks/usePoint";
export default {
  name: 'Demo',
  setup() {
    let point = usqmvlAePoint()

    return {
      point
    }
  },
}
</script>

封装发ajax请求的hook函数(ts版本)

hooks 下新建 useRequest.ts

由于用到了 axios,所以安装axios:npm install axios

import {ref} from "vue";
import axios from "axios";
export default function <T>(url: string) {
    const loading = ref(true);
    const data = http://www.cppcns.com/wangluo/javascript/ref(null);
    const errorMsg = ref('');
    axios.get(url).then(response => {
        loading.value = http://www.cppcns.com/wangluo/javascript/false
        data.value = response.data
    }).catch(error => {
        loading.value = false
        errorMsg.value = error.message ||'未知错误'
    })
    return {
        loading,
        data,
        errorMsg
    }
}

App.vue:

<template>
  <h3 v-if="loading">加载中...</h3>
  <h3 v-else编程客栈-if="errorMsg">错误信息:{{errorMsg}}</h3>
  <!-- 对象 -->
  <ul v-else>
    <li>{{data.name}}</li>
    <li>{{data.address}}</li>
    <li>{{data.distance}}</li>
  </ul>
  <!-- 数组 -->
  <ul v-for="item in data" :key="item.name">
    <li>{{item.name}}</li>
    <li>{{item.address}}</li>
    <li>{{item.distance}}</li>
  </ul>
</template>
<script lang="ts">
import {defineComponent, watch} from 'vue';
import useRequest from "@/hooks/useRequest";

export default defineComponent({
  setup() {
    // 定义接口
    interface IAddress{
      name:string,
      address:string,
      distance:string
    }
    //const {loading,data,errorMsg} = useRequest<IAddress>("./address.json")//获取对象数据
    const {loading,dataqmvlA,errorMsg} = useRequest<IAddress[]>("./addressList.json")//获取对象数据
 编程客栈   watch(data, () => {
      if (data.value) {
        console.log(data.value.length)
      }
    })
    return {
      loading,
      data,
      errorMsg
    }
  }
});
</script>

测试数据有对象类型的 address.json:

{
  "name": "家",
  "address": "开发区人民路22号",
  "distance": "100km"
}

还有数组类型的 addressList.json

详解Vue自定义hook函数

到此这篇关于详解Vue 自定义hook 函数的文章就介绍到这了,更多相关Vue 自定义hook 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

详解Vue 自定义hook 函数

扫一扫手机访问