likes
comments
collection
share

Vue3,用组合编写更好的代码:动态返回(3/4)

作者站长头像
站长
· 阅读数 259

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 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的useIntervaluseNow组件是如何实现这一模式的。

这种模式非常适合在大多数情况下简化我们的代码,同时在需要的时候仍然允许更大的复杂性。这有点像一张带抽屉的桌子。当你需要的时候,你可以把很多东西放在桌子上。但你也可以把它们放在抽屉里以保持整洁。


编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

作者:Michael Thiessen 译者:小智 来源:vuemastery

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

交流

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

Vue3,用组合编写更好的代码:动态返回(3/4)