詳解Vue?自定義hook?函數(shù)
更新時(shí)間：2022年06月15日 11:56:01 作者：奔跑吧雞翅
這篇文章主要介紹了詳解Vue自定義hook函數(shù)，hook函數(shù)本質(zhì)是一個(gè)函數(shù)，把setup函數(shù)中使用的Composition?API進(jìn)行了封裝，更多相關(guān)內(nèi)容感興趣的朋友可以參考一下
定義
什么是hook?
- 本質(zhì)是一個(gè)函數(shù)，把 setup 函數(shù)中使用的 Composition API （組合API）進(jìn)行了封裝
- 類似于 vue2.x 中的 mixin
自定義 hook 的優(yōu)勢(shì)：
- 復(fù)用代碼，讓 setup 中的邏輯更清楚易懂
使用
首先我們做一個(gè)功能，鼠標(biāo)點(diǎn)擊屏幕，獲取坐標(biāo):
<template>
<h2>當(dāng)前鼠標(biāo)的坐標(biāo)是：x:{{ point.x }}，y:{{ point.y }}</h2>
</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;或者簡(jiǎn)寫：
......
export default function() {
......
}在 Demo.vue 中使用:
<template>
<h2>當(dāng)前鼠標(biāo)的坐標(biāo)是：x:{{ point.x }}，y:{{ point.y }}</h2>
</template>
<script>
import usePoint from "@/hooks/usePoint";
export default {
name: 'Demo',
setup() {
let point = usePoint()
return {
point
}
},
}
</script>封裝發(fā)ajax請(qǐng)求的hook函數(shù)（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 = 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 || '未知錯(cuò)誤'
})
return {
loading,
data,
errorMsg
}
}App.vue:
<template>
<h3 v-if="loading">加載中...</h3>
<h3 v-else-if="errorMsg">錯(cuò)誤信息：{{errorMsg}}</h3>
<!-- 對(duì)象 -->
<ul v-else>
<li>{{data.name}}</li>
<li>{{data.address}}</li>
<li>{{data.distance}}</li>
</ul>
<!-- 數(shù)組 -->
<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")//獲取對(duì)象數(shù)據(jù)
const {loading,data,errorMsg} = useRequest<IAddress[]>("./addressList.json")//獲取對(duì)象數(shù)據(jù)
watch(data, () => {
if (data.value) {
console.log(data.value.length)
}
})
return {
loading,
data,
errorMsg
}
}
});
</script>測(cè)試數(shù)據(jù)有對(duì)象類型的 address.json:
{
"name": "家",
"address": "開(kāi)發(fā)區(qū)人民路22號(hào)",
"distance": "100km"
}還有數(shù)組類型的 addressList.json
到此這篇關(guān)于詳解Vue 自定義hook 函數(shù)的文章就介紹到這了,更多相關(guān)Vue 自定義hook 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解
最近小編遇到這樣的需求，要實(shí)現(xiàn)一個(gè)新聞?wù)故卷?yè)功能，剛接到這樣的需求還真是一頭霧水，不知從哪入手，今天小編通過(guò)實(shí)例代碼給大家介紹下vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解，感興趣的朋友跟隨小編一起看看吧2019-04-04
vscode中使用vue的一些插件總結(jié)(方便開(kāi)發(fā))
對(duì)于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來(lái)說(shuō),可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vuex中...mapstate和...mapgetters的區(qū)別及說(shuō)明
這篇文章主要介紹了vuex中...mapstate和...mapgetters的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue打包部署到springboot的實(shí)現(xiàn)示例
項(xiàng)目開(kāi)發(fā)中,一般我們都會(huì)使用SpringBoot+Vue進(jìn)行前后端開(kāi)發(fā),本文主要介紹了vue打包部署到springboot的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問(wèn)題
這篇文章主要介紹了詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
當(dāng)遍歷一個(gè)數(shù)組或枚舉一個(gè)對(duì)象進(jìn)行迭代循環(huán)展示時(shí)，就會(huì)用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下2018-11-11
vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能示例
這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能,結(jié)合實(shí)例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例
下面小編就為大家分享一篇vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue-cli3中vue.config.js配置教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
element ui里dialog關(guān)閉后清除驗(yàn)證條件方法
下面小編就為大家分享一篇element ui里dialog關(guān)閉后清除驗(yàn)證條件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02