Vue怎么自定義hooks函數(shù)

本文小編為大家詳細(xì)介紹“Vue怎么自定義hooks函數(shù)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue怎么自定義hooks函數(shù)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

在Vue當(dāng)中,一個非常重要的功能就是組件的復(fù)用,編寫Vue組件,更多的也是在拼裝組件,將頁面的各個功能進(jìn)行模塊化

便于維護(hù)和管理,而在項(xiàng)目里,有些頁面中的組件的邏輯功能是一樣的,如果沒有進(jìn)行功能邏輯的復(fù)用,那么每個頁面都需要重復(fù)的寫一遍

在Vue當(dāng)中各個組件是保持獨(dú)立的,如果想要復(fù)用頁面當(dāng)中的某個組件的邏輯,也就是復(fù)用組件邏輯的代碼

那么可以抽離邏輯,放到一個公共的地方管理的,方便在其他地方調(diào)用,達(dá)到復(fù)用代碼和邏輯的目的

在Vue2當(dāng)中可以使用mixin,但使用這個有很多缺點(diǎn),而在Vue3中引入了組合式函數(shù),也就是自定義hooks就很好的解決了之前的問題

自定義hooks

解釋: 本質(zhì)上是一個函數(shù),把setup函數(shù)中使用的composition API進(jìn)行了封裝,復(fù)用有狀態(tài)邏輯的函數(shù)

類似Vue2的mixin

優(yōu)勢: 自定義hooks,復(fù)用代碼,讓setup中的邏輯更加清除易懂

點(diǎn)擊屏幕記錄鼠標(biāo)位置

現(xiàn)在有一個需求:就是記錄用戶點(diǎn)擊瀏覽器的位置,顯示到瀏覽器上,在組件中使用組合式API實(shí)現(xiàn)點(diǎn)擊鼠標(biāo)跟蹤功能,示例代碼如下所示

新建一個clickPoint.vue

import { ref,onMounted,onUnmounted } from 'vue';

const x = ref(0);  // 坐標(biāo)x的值
const y = ref(0);  // 坐標(biāo)y的值

function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
}
onMounted(() => {
    /*
    window.addEventListener('click',(event) => {
        x.value = event.pageX;
        y.value = event.pageY;
    })*/
    window.addEventListener('click',update)
    // 對于后面的這個回調(diào)處理函數(shù),可以單獨(dú)的抽離出去

})

// 解綁函數(shù)副作用
onUnmounted(() => {
    window.removeEventlistener('click',update);
})

模板代碼

<template>鼠標(biāo)的位置是:{{x}},{{y}}</template>

現(xiàn)在,如果想要在多個組件中復(fù)用這個相同的功能邏輯,我們可以把這個邏輯以一個組合式函數(shù)的形式提取到外部文件當(dāng)中的 我們命名這個文件叫usePoint.js

import {ref,onMounted,onUnmounted} from 'vue';

// 按照習(xí)慣,約定俗成,組合式函數(shù)名以`use`開頭
export function usePoint() {
    // 被組合式函數(shù)封裝和管理的狀態(tài)
    const x = ref(0);
    const y = ref(y);

    function update(event) {
       x.value = event.pageX;
       y.value = event.pageY;
    }
    onMounted(() => {
      window.addEventListener('click',update)
    })
    // 解綁函數(shù)副作用
    onUnmounted(() => {
        window.removeEventlistener('click',update);
    })

    // 通過返回值暴露所有管理的狀態(tài)
    return {
        x,
        y
    }
}

那它在組件中使用的方式

<script setup>
    import { usePoint } from "./usePoint.js"

    const { x,y} = usePoint();
    // 如果希望以對象屬性的形式來使用組合式函數(shù)中返回的狀態(tài),可以將返回的對象用reactive()包裝一次,這樣其中的ref會被自動解包
    const clickPoint = reactive(usePoint());
    // clickPoint.x鏈接到原來的x ref
    console.log(clickPoint.x,clickPoint.y);
</script>

然后在模板中

<template>
    鼠標(biāo)的坐標(biāo): {{x}},{{y}}
    或
    鼠標(biāo)的坐標(biāo): {{clickPoint.x}},{{clickPoint.y}}
</template>

核心邏輯完全一致，我們做的只是把它移到一個外部函數(shù)中去，并返回需要暴露的狀態(tài)。和在組件中一樣，你也可以在組合式函數(shù)中使用所有的組合式 API。現(xiàn)在，usePoint() 的功能可以在任何組件中輕易復(fù)用了。

可以嵌套多個組合式函數(shù)：一個組合式函數(shù)可以調(diào)用一個或多個其他的組合式函數(shù)。這使得我們可以像使用多個組件組合成整個應(yīng)用一樣，用多個較小且邏輯獨(dú)立的單元來組合形成復(fù)雜的邏輯。實(shí)際上，這也是將這一設(shè)計模式的 API 集合命名為組合式 API

hooks函數(shù)的命名

組合式函數(shù)約定用駝峰式命名,并以use作為開頭

與Mixin的對比

Vue2可能會對 mixins 選項(xiàng)比較熟悉。它也讓我們能夠把組件邏輯提取到可復(fù)用的單元里。然而 mixins 有三個主要的短板：

[1]. 不清晰的數(shù)據(jù)來源：當(dāng)使用了多個 mixin 時，實(shí)例上的數(shù)據(jù)屬性來自哪個mixin 變得不清晰，這使追溯實(shí)現(xiàn)和理解組件行為變得困難。這也是我們推薦在組合式函數(shù)中使用 ref +解構(gòu)模式的理由：讓屬性的來源一目了然

[2]. 命名空間沖突：多個來自不同作者的 mixin 可能會注冊相同的屬性名，造成命名沖突。若使用組合式函數(shù)，你可以通過在解構(gòu)變量時對變量進(jìn)行重命名來避免相同的鍵名

[3]. 隱式的跨 mixin交流：多個 mixin 需要依賴共享的屬性名來進(jìn)行相互作用，這使得它們隱性地耦合在一起。而一個組合式函數(shù)的返回值可以作為另一個組合式函數(shù)的參數(shù)被傳入，像普通函數(shù)那樣

在Vue 3中不推薦使用 mixin。有時需要查找一個變量,那么需要全局的搜索

與無渲染組件的對比

組合式函數(shù)相對于無渲染組件的主要優(yōu)勢是：組合式函數(shù)不會產(chǎn)生額外的組件實(shí)例開銷。當(dāng)在整個應(yīng)用中使用時，由無渲染組件產(chǎn)生的額外組件實(shí)例會帶來無法忽視的性能開銷。

我們推薦在純邏輯復(fù)用時使用組合式函數(shù)，在需要同時復(fù)用邏輯和視圖布局時使用無渲染組件。

讀到這里，這篇“Vue怎么自定義hooks函數(shù)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。