詳解Vue?自定義hook?函數(shù)
定義
什么是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項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來(lái)的界面
這篇文章主要介紹了vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來(lái)的界面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)
在vuejs中使用axios時(shí),有時(shí)候需要追加數(shù)據(jù),比如,移動(dòng)端下拉觸底加載,分頁(yè)加載,滑動(dòng)滾動(dòng)條等,下面小編就來(lái)為大家介紹一下如何使用使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)吧2023-10-10關(guān)于Element-UI中slot的用法及說(shuō)明
這篇文章主要介紹了關(guān)于Element-UI中slot的用法及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue向后端傳數(shù)據(jù)后端接收為null問(wèn)題及解決
這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法
這篇文章主要為大家詳細(xì)介紹了vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10vue如何動(dòng)態(tài)修改meta的title
這篇文章主要介紹了vue如何動(dòng)態(tài)修改meta的title,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06利用vue重構(gòu)有贊商城的思路以及總結(jié)整理
這篇文章主要介紹了利用vue重構(gòu)有贊商城的思路以及總結(jié)整理,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02