詳解Vue如何自定義hooks(組合式)函數(shù)

更新時(shí)間：2023年03月13日 11:15:37 作者：itclanCoder

這篇文章主要為大家詳細(xì)介紹了在Vue中如何實(shí)現(xiàn)自定義hooks(組合式)函數(shù)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

自定義hooks

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

類似Vue2的mixin

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

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

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

新建一個(gè)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)
    // 對(duì)于后面的這個(gè)回調(diào)處理函數(shù),可以單獨(dú)的抽離出去

})

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

模板代碼

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

現(xiàn)在,如果想要在多個(gè)組件中復(fù)用這個(gè)相同的功能邏輯,我們可以把這個(gè)邏輯以一個(gè)組合式函數(shù)的形式提取到外部文件當(dāng)中的我們命名這個(gè)文件叫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();
    // 如果希望以對(duì)象屬性的形式來使用組合式函數(shù)中返回的狀態(tài),可以將返回的對(duì)象用reactive()包裝一次,這樣其中的ref會(huì)被自動(dòng)解包
    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>

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

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

hooks函數(shù)的命名

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

與Mixin的對(duì)比

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

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

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

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

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

與無渲染組件的對(duì)比

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

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