詳解Vue?自定義hook?函數(shù)
定義
什么是hook?
- 本質(zhì)是一個函數(shù),把 setup 函數(shù)中使用的 Composition API (組合API)進行了封裝
- 類似于 vue2.x 中的 mixin
自定義 hook 的優(yōu)勢:
- 復用代碼,讓 setup 中的邏輯更清楚易懂
使用
首先我們做一個功能,鼠標點擊屏幕,獲取坐標:
<template> <h2>當前鼠標的坐標是: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;
或者簡寫:
...... 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 = usePoint() return { point } }, } </script>
封裝發(fā)ajax請求的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 || '未知錯誤' }) 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> <!-- 數(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")//獲取對象數(shù)據(jù) const {loading,data,errorMsg} = useRequest<IAddress[]>("./addressList.json")//獲取對象數(shù)據(jù) watch(data, () => { if (data.value) { console.log(data.value.length) } }) return { loading, data, errorMsg } } }); </script>
測試數(shù)據(jù)有對象類型的 address.json:
{ "name": "家", "address": "開發(fā)區(qū)人民路22號", "distance": "100km" }
還有數(shù)組類型的 addressList.json
到此這篇關于詳解Vue 自定義hook 函數(shù)的文章就介紹到這了,更多相關Vue 自定義hook 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue項目如何使用$router.go(-1)返回時刷新原來的界面
這篇文章主要介紹了vue項目如何使用$router.go(-1)返回時刷新原來的界面問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue使用axios實現(xiàn)動態(tài)追加數(shù)據(jù)
在vuejs中使用axios時,有時候需要追加數(shù)據(jù),比如,移動端下拉觸底加載,分頁加載,滑動滾動條等,下面小編就來為大家介紹一下如何使用使用axios實現(xiàn)動態(tài)追加數(shù)據(jù)吧2023-10-10Vue向后端傳數(shù)據(jù)后端接收為null問題及解決
這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09