这篇文章主要介绍“Vue怎么自定义hook函数”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么自定义hook函数”文章能帮助大家解决问题。
什么是hook?
本质是一个函数,把 setup 函数中使用的 Composition API (组合API)进行了封装
类似于 vue2.x 中的 mixin
自定义 hook 的优势:
复用代码,让 setup 中的逻辑更清楚易懂
首先我们做一个功能,鼠标点击屏幕,获取坐标:
<template> <h3>当前鼠标的坐标是:x:{{ point.x }},y:{{ point.y }}</h3> </template> <script> import {onMounted, onBeforeUnmount,reactive} from 'vue' export default { name: 'Demo', setup() { let point = reactive({ x: 0, y: 0 }) function savePoint(event) { point.x = event.pageX; point.y = event.pageY; } onMounted(() => { window.addEventListener("click",savePoint) }) onBeforeUnmount(()=>{ window.removeEventListener("click",savePoint) }) return { point, } }, } </script>
然后改用使用 hooks,在 src 下新建 hooks 文件夹,增加 usePoint.js
import {onBeforeUnmount, onMounted, reactive} from "vue/dist/vue"; function savePoint() { let point = reactive({ x: 0, y: 0 }) function savePoint(event) { point.x = event.pageX; point.y = event.pageY; } onMounted(() => { window.addEventListener("click",savePoint) }) onBeforeUnmount(()=>{ window.removeEventListener("click",savePoint) }) return point } export default savePoint;
或者简写:
...... export default function() { ...... }
在 Demo.vue 中使用:
<template> <h3>当前鼠标的坐标是:x:{{ point.x }},y:{{ point.y }}</h3> </template> <script> import usePoint from "@/hooks/usePoint"; export default { name: 'Demo', setup() { let point = usePoint() return { point } }, } </script>
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 = ref<T | null>(null); const errorMsg = ref(''); axios.get(url).then(response => { loading.value = false data.value = response.data }).catch(error => { loading.value = false errorMsg.value = error.message || '未知错误' }) return { loading, data, errorMsg } }
App.vue:
<template> <h4 v-if="loading">加载中...</h4> <h4 v-else-if="errorMsg">错误信息:{{errorMsg}}</h4> <!-- 对象 --> <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,data,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函数”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。