引言

截至目前，Composable(組合式函數(shù))應(yīng)該是在VUE 3應(yīng)用程序中組織業(yè)務(wù)邏輯最佳的方法。

它讓我們可以把一些小塊的通用邏輯進(jìn)行抽離、復(fù)用，使我們的代碼更易于編寫、閱讀和維護(hù)。

由于這種編寫VUE代碼的方式相對較新，因此您可能想知道編寫組合式函數(shù)的最佳實(shí)踐是什么呢？本系列教程可以作為您和您的團(tuán)隊(duì)在進(jìn)行組合式開發(fā)過程中的參考指南。

我們將涵蓋以下內(nèi)容：

• 1.如何通過選項(xiàng)對象參數(shù)使您的組合更加可配置； ?? 本篇主題
• 2.使用ref和unref使我們的參數(shù)更加靈活；
• 3.如何使你的返回值更有用；
• 4.為什么從接口定義開始可以使你的組合式函數(shù)更強(qiáng)大；
• 5.如何使用異步代碼而無需“等待” - 使您的代碼更易于理解；

不過，首先，我們需要確保我們對組合式函數(shù)的理解是一致的。我們先花點(diǎn)時(shí)間解釋一下什么是組合式函數(shù)。

什么是Composable-組合式函數(shù)？

根據(jù)官方文檔說明，在 Vue 應(yīng)用的概念中，“組合式函數(shù)”是一個(gè)利用 Vue 組合式 API 來封裝和復(fù)用有狀態(tài)邏輯的函數(shù)。
這就意味著，任何有狀態(tài)邏輯，并且使用了響應(yīng)式處理的邏輯都可以轉(zhuǎn)換成組合式函數(shù)。這和我們平時(shí)抽離封裝的公共方法還是有一些區(qū)別的。我們封裝的公共方法往往是無狀態(tài)的：它在接收一些輸入后立刻返回所期望的輸出。而組合式函數(shù)往往是和狀態(tài)邏輯關(guān)聯(lián)的。

讓我們看看官方給出的useMouse這個(gè)組合式函數(shù)：

import { ref, onMounted, onUnmounted } from 'vue'
// 按照慣例，組合式函數(shù)名以“use”開頭
export function useMouse() {
  // 被組合式函數(shù)封裝和管理的狀態(tài)
  const x = ref(0)
  const y = ref(0)
  // 組合式函數(shù)可以隨時(shí)更改其狀態(tài)。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  // 一個(gè)組合式函數(shù)也可以掛靠在所屬組件的生命周期上
  // 來啟動(dòng)和卸載副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  // 通過返回值暴露所管理的狀態(tài)
  return { x, y }
}

我們把狀態(tài)定義為refs,當(dāng)鼠標(biāo)移動(dòng)的時(shí)候我們更新這個(gè)狀態(tài)。通過返回x和y，我們可以在任何組件中使用它們，甚至我們還可以把多個(gè)組合式函數(shù)嵌套使用。

當(dāng)我們在組件中使用時(shí)

<template>
  X: {{ x }} Y: {{ y }}
</template>
<script setup>
  import { useMouse } from './useMouse';
  const { x, y } = useMouse();
</script>

如您所見，通過使用useMouse我們可以輕松的復(fù)用這個(gè)邏輯。僅僅很少的代碼，我們就可以在組件中獲取鼠標(biāo)坐標(biāo)狀態(tài)。

現(xiàn)在我們對組合式函數(shù)有了相同的認(rèn)識，讓我們看一下可以幫助我們編寫更好的組合式函數(shù)的第一個(gè)方法吧。

選項(xiàng)對象參數(shù)

大部分組合式函數(shù)都會有一個(gè)或兩個(gè)必須的參數(shù)，然后有一系列可選的參數(shù)來幫助進(jìn)行一些額外的配置。在配置組合式函數(shù)時(shí)，我們可以將一系列的可選配置放到一個(gè)選項(xiàng)對象參數(shù)中，而不是一長串參數(shù)的形式。

// 使用選項(xiàng)對象參數(shù)形式
const title = useTitle('A new title', { titleTemplate: '>> %s <<' });
// Title is now ">> A new title <<"
// 使用多參數(shù)形式
const title = useTitle('A new title', '>> %s <<');
// Title is now ">> A new title <<"

選項(xiàng)對象參數(shù)的形式可以給我們帶來一些便利：

• 首先，我們不必記住參數(shù)的正確順序，特別是參數(shù)很多的時(shí)候。雖然現(xiàn)在我們可以通過Typescript和編輯器提示功能來避免這類問題，但是通過這種方式仍然是有差別的。使用Javascript對象，參數(shù)的順序就不那么重要了。（當(dāng)然，這也要求我們的函數(shù)定義需要清晰明了，我們后面會談）
• 其次，代碼更可讀取，因?yàn)槲覀冎涝撨x項(xiàng)的作用是什么。
• 第三，代碼擴(kuò)展性更好，以后添加新的選項(xiàng)要容易得多。這既適用于為組合式函數(shù)本身添加新選項(xiàng)，又適用于嵌套使用時(shí)參數(shù)傳遞。

因此，使用對象參數(shù)更加友好，但是我們該如何來實(shí)現(xiàn)呢？

在組合式函數(shù)中的實(shí)現(xiàn)

現(xiàn)在讓我們看下如何在組合式函數(shù)中使用選項(xiàng)對象參數(shù)。我們來給上面的useMouse進(jìn)行一些擴(kuò)展：

export function useMouse(options) {
  const {
    asArray = false,
    throttle = false,
  } = options;
  // ...
};

useMouse本身沒有必傳參數(shù)，所以我們直接給它增加一個(gè)options參數(shù)來進(jìn)行一些額外的配置。通過解構(gòu)，我們可以訪問所有的選傳參數(shù)，并且為每個(gè)參數(shù)設(shè)置了默認(rèn)值，這就避免了有些不需要額外配置的調(diào)用時(shí)沒有傳入可選參數(shù)的情況。

現(xiàn)在讓我們來看兩個(gè)VueUse上面的組合式函數(shù)是如何使用這個(gè)模式的。VueUse是一個(gè)服務(wù)于Vue3的組合式函數(shù)的常用工具集，它的初衷就是將一切原本并不支持響應(yīng)式的JS API變得支持響應(yīng)式，省去程序員自己寫相關(guān)代碼。

我們先來看useTitle，然后再看一下useRefHistory是如何實(shí)現(xiàn)的。

舉例-useTitle

useTitle的作用非常簡單，就是用來更新頁面的標(biāo)題。

const title = useTitle('Initial Page Title');
// Title: "Initial Page Title"
title.value = 'New Page Title';
// Title: "New Page Title"

它也有幾個(gè)選擇參數(shù)，來促進(jìn)額外的靈活性。我們可以傳入titleTemplate作為模版，并且通過observe來將其設(shè)置稱為具備觀察性（內(nèi)部通過MutationObserver實(shí)現(xiàn)）：

const title = useTitle('Initial Page Title', {
  titleTemplate: '>> %s <<',
  observe: true,
});
// Title: ">> Initial Page Title <<"
title.value = 'New Page Title';
// Title: ">> New Page Title <<"

當(dāng)我們查看它的源碼的時(shí)候可以看到以下處理

export function useTitle(newTitle, options) {
  const {
    document = defaultDocument,
    observe = false,
    titleTemplate = '%s',
  } = options;
  // ...
}

useTitle包含一個(gè)必傳的參數(shù)，以及一個(gè)可選參數(shù)對象。正如我們上面描述的那樣，它完全是按照這個(gè)模式來實(shí)現(xiàn)的。
接下來，讓我們看一下一個(gè)更復(fù)雜的組合式函數(shù)是如何使用選項(xiàng)對象模式的。

舉例-useRefHistory

useRefHistory可以幫助我們追蹤一個(gè)響應(yīng)式變量的所有更改，可以讓我們輕松的執(zhí)行撤銷和恢復(fù)的操作。

// Set up the count ref and track it
const count = ref(0);
const { undo } = useRefHistory(count);
// Increment the count
count.value++;
// Log out the count, undo, and log again
console.log(counter.value); // 1
undo();
console.log(counter.value); // 0

它支持設(shè)置許多不同的配置選擇

{
  deep: false,
  flush: 'pre',
  capacity: -1,
  clone: false,
  // ...
}

如果想知道這些選項(xiàng)參數(shù)的完整列表和對應(yīng)的功能，可以去查看相關(guān)文檔，在此不再贅述。

我們可以將選項(xiàng)對象作為第二個(gè)參數(shù)傳遞，以進(jìn)一步配置該組合函數(shù)的行為，與我們上一個(gè)示例相同：

export function useRefHistory(source, options) {
  const {
    deep = false,
    flush = 'pre',
    eventFilter,
  } = options;
  // ...
}

我們可以看到它內(nèi)部僅僅解構(gòu)出了一部分參數(shù)值，這是因?yàn)?code>useRefHistory內(nèi)部依賴了useManualHistory這個(gè)組合式函數(shù)，其他的選項(xiàng)參數(shù)將在后面透傳給useManualHistory時(shí)進(jìn)行展開合并。

// ...
const manualHistory = useManualRefHistory(
  source,
  {
    // Pass along the options object to another composable
    ...options,
    clone: options.clone || deep,
    setSource,
  },
);
// ...

這也和我們前面說到的內(nèi)容相符：組合式函數(shù)可以嵌套使用。

小結(jié)

本文是“組合式函數(shù)最佳實(shí)踐”的第一部分。我們研究了如何通過選項(xiàng)對象參數(shù)提升組合式函數(shù)的靈活性。無須擔(dān)心參數(shù)順序不對導(dǎo)致的問題，并且可以靈活進(jìn)行配置項(xiàng)的增加擴(kuò)展。我們不僅僅研究了這個(gè)模式本身，我們還通過VueUse中的useTitle和useRefHistory來學(xué)習(xí)了如何實(shí)現(xiàn)此模式。它們略有不同，但是這個(gè)模式本身就是很簡單的，我們通過它能做到也是有限的。

下一篇我們將介紹如何通過ref和unref使我們的參數(shù)更加靈活

// Works if we give it a ref we already have
const countRef = ref(2);
useCount(countRef);
// Also works if we give it just a number
const countRef = useRef(2);

這增加了靈活性，使我們能夠在應(yīng)用程序中的更多情況下使用我們的組合。

以上就是Vue3 組合式函數(shù)Composable最佳實(shí)戰(zhàn)的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Composable的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論