如果你的組合可以根據(jù)其使用情況更改返回的內(nèi)容會(huì)怎樣?如果我們只需要一個(gè)值，它可以這樣做。如果需要返回整個(gè)對(duì)象，它也能做到。

本文將介紹一種向可組合對(duì)象添加動(dòng)態(tài)返回的模式。我們將了解何時(shí)使用該模式、如何實(shí)現(xiàn)它，并查看正在使用的模式的一些示例。

動(dòng)態(tài)返回值的模式

這種模式延續(xù)了上一篇關(guān)于靈活參數(shù)的文章中 "為什么不兩全其美？"的思路。一個(gè)可組合既可以返回一個(gè)單一的值，也可以返回一個(gè)值的對(duì)象。

// 返回一個(gè)值
const isDark = useDark();
// 返回多個(gè)值
const {
  counter,
  pause,
  resume,
} = useInterval(1000, { controls: true });

這是一個(gè)不錯(cuò)的功能，因?yàn)槲覀兛梢钥刂茝?fù)雜程度。當(dāng)需要的是簡(jiǎn)單的時(shí)候，就簡(jiǎn)單。當(dāng)需要復(fù)雜性時(shí)，則是復(fù)雜的。

VueUse的useInterval組合就是使用了這種模式。

大多數(shù)時(shí)候，在使用useInterval時(shí)，我們只需要 counter。所以默認(rèn)情況下，它只是返回這個(gè)。

// 默認(rèn)行為
const counter = useInterval(1000);
// 1...
// 2...
// 3...

如果你想暫停和重置 counter，也可以通過(guò) controls 參數(shù)來(lái)做到這一點(diǎn)。

const {
  counter,
  pause,
  resume,
} = useInterval(1000, { controls: true });
// 1...
// 2...
pause();
// ...
resume();
// 3...
// 4...

接下來(lái)，我們來(lái)看看這種模式怎么實(shí)現(xiàn)。

實(shí)現(xiàn)

為了實(shí)現(xiàn)這一模式，我們需要做兩件事：

• 在 options對(duì)象中添加一個(gè)選項(xiàng)來(lái)打開(kāi)它。
• 使用該選項(xiàng)來(lái)改變 retrun行為。

下面是大概的實(shí)現(xiàn)思路：

export default useComposable(input, options) {
  // 1. Add in the `controls` option
  const { controls = false } = options;
  // ...
  // 2. Either return a single value or an object
  if (controls) {
    return { singleValue, anotherValue, andAnother };
  } else {
    return singleValue;
  }
}

也許你想在一個(gè)現(xiàn)有的選項(xiàng)上進(jìn)行切換，而不是只為這個(gè)目的使用一個(gè) controls 選項(xiàng)。也許使用三元表達(dá)式或比 if 語(yǔ)句更簡(jiǎn)潔。也可能有一種完全不同的方式最適合你。這種模式的重要之處在于切換，而不是切換的方式。

接下來(lái)，讓我們看看VueUse的一些組合方法如何實(shí)現(xiàn)這一模式。

useInterval

首先，讓我們深入了解一下useInterval的工作原理。

在可組合的最頂層，我們對(duì) options 對(duì)象進(jìn)行解構(gòu)，取出 controls 選項(xiàng)并將其重命名為exposeControls，默認(rèn)值為 false.

const {
  controls: exposeControls = false,
  immediate = true,
} = options;

最后，在if語(yǔ)句，判斷 exposeControls，如果為 true 剛返回 counter 及其它屬性，否則只返回 counter。

if (exposeControls) {
  return {
    counter,
    ...controls,
  };
else {
  return counter;
}

有了這兩段代碼，我們可以使任何可組合的有一個(gè)更靈活的返回語(yǔ)句。

現(xiàn)在，在來(lái)看看 useNow 函數(shù)。

useNow 組合式返回一個(gè)現(xiàn)在時(shí)間 Date 對(duì)象，并進(jìn)行響度式式更新。

const now = useNow();

默認(rèn)情況下，它每一幀都會(huì)自我更新--默認(rèn)每秒60次。我們可以改變它的更新頻率，也可以暫停和恢復(fù)更新過(guò)程。

const { now, pause, resume } = useNow({ controls: true });

這個(gè)組合的工作方式與 useInterval 組合非常相似。在內(nèi)部，它們都使用VueUse暴露的useIntervalFn 幫助器。

首先，我們對(duì)options對(duì)象進(jìn)行解構(gòu)，得到controls選項(xiàng)，再次將其更名為exposeControls，以避免命名沖突。

然后我們?cè)诳山M合的結(jié)束時(shí)返回。這里我們使用if語(yǔ)句在兩種情況之間切換。

if (exposeControls) {
  return {
    now,
    ...controls,
  };
else {
  return now;
}

正如你所看到的，這種模式在useInterval和useNow組合中的實(shí)現(xiàn)幾乎是一樣的。VueUse中所有實(shí)現(xiàn)這種模式的組合物都是以這種特殊方式實(shí)現(xiàn)的。

下面是我能找到的所有在VueUse中實(shí)現(xiàn)這種模式的可組合的列表，供你自己進(jìn)一步探索。

• useInterval
• useTimeout
• useNow
• useTimestamp
• useTimeAgo

總結(jié)

我們看到，動(dòng)態(tài)返回值讓我們可以更靈活地選擇如何使用可組合。我們可以得到一個(gè)單一的值，如果這就是我們需要的。我們也可以得到一個(gè)包含值、方法和其他我們可能想要的東西的整個(gè)對(duì)象。

但我們并不只是看了這個(gè)模式本身。我們看到了VueUse的useInterval和useNow組件是如何實(shí)現(xiàn)這一模式的。

這種模式非常適合在大多數(shù)情況下簡(jiǎn)化我們的代碼，同時(shí)在需要的時(shí)候仍然允許更大的復(fù)雜性。這有點(diǎn)像一張帶抽屜的桌子。當(dāng)你需要的時(shí)候，你可以把很多東西放在桌子上。但你也可以把它們放在抽屜里以保持整潔。