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

本文將介紹一種向可組合對象添加動態返回的模式。我們將了解何時使用該模式、如何實現它，并查看正在使用的模式的一些示例。

動態返回值的模式

這種模式延續了上一篇關于靈活參數的文章中 "為什么不兩全其美？"的思路。一個可組合既可以返回一個單一的值，也可以返回一個值的對象。

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

這是一個不錯的功能，因為我們可以控制復雜程度。當需要的是簡單的時候，就簡單。當需要復雜性時，則是復雜的。

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

大多數時候，在使用useInterval時，我們只需要 counter。所以默認情況下，它只是返回這個。

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

如果你想暫停和重置 counter，也可以通過 controls 參數來做到這一點。

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

接下來，我們來看看這種模式怎么實現。

實現

為了實現這一模式，我們需要做兩件事：

• 在 options對象中添加一個選項來打開它。
• 使用該選項來改變 retrun行為。

下面是大概的實現思路：

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;
  }
}

也許你想在一個現有的選項上進行切換，而不是只為這個目的使用一個 controls 選項。也許使用三元表達式或比 if 語句更簡潔。也可能有一種完全不同的方式最適合你。這種模式的重要之處在于切換，而不是切換的方式。

接下來，讓我們看看VueUse的一些組合方法如何實現這一模式。

useInterval

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

在可組合的最頂層，我們對 options 對象進行解構，取出 controls 選項并將其重命名為exposeControls，默認值為 false.

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

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

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

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

現在，在來看看 useNow 函數。

useNow 組合式返回一個現在時間 Date 對象，并進行響度式式更新。

const now = useNow();

默認情況下，它每一幀都會自我更新--默認每秒60次。我們可以改變它的更新頻率，也可以暫停和恢復更新過程。

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

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

首先，我們對options對象進行解構，得到controls選項，再次將其更名為exposeControls，以避免命名沖突。

然后我們在可組合的結束時返回。這里我們使用if語句在兩種情況之間切換。

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

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

下面是我能找到的所有在VueUse中實現這種模式的可組合的列表，供你自己進一步探索。

• useInterval
• useTimeout
• useNow
• useTimestamp
• useTimeAgo

總結

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

但我們并不只是看了這個模式本身。我們看到了VueUse的useInterval和useNow組件是如何實現這一模式的。

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