Vue3，用組合編寫更好的程式碼：動態返回(3/4)

前端小智發表於2022-07-14
Vue

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

這是《用組合編寫更好的程式碼》第二篇，之前文章：

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

本文將介紹一種向可組合物件新增動態返回的模式。我們將瞭解何時使用該模式、如何實現它，並檢視正在使用的模式的一些示例。

動態返回值的模式

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

// 返回一個值
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元件是如何實現這一模式的。

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

編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

作者：Michael Thiessen 譯者：小智 來源：vuemastery

原文： https://www.vuemastery.com/bl...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章