详解Vue|详解Vue 自定义hook 函数详解Vue自定义hook函数

定义
使用
封装发ajax请求的hook函数（ts版本）

定义 【详解Vue|详解Vue 自定义hook 函数】什么是hook?

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

自定义 hook 的优势：

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

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

然后改用使用 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 中使用:

封装发ajax请求的hook函数（ts版本） hooks 下新建 useRequest.ts
由于用到了 axios，所以安装axios：npm install axios

import {ref} from "vue"; import axios from "axios"; export default function (url: string) {const loading = ref(true); const data = https://www.it610.com/article/ref(null); const errorMsg = ref(''); axios.get(url).then(response => {loading.value = https://www.it610.com/article/falsedata.value = response.data}).catch(error => {loading.value = https://www.it610.com/article/falseerrorMsg.value = error.message ||'未知错误'})return {loading,data,errorMsg}}

App.vue:

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