vue返回上一页（用组合编写更好的代码:动态返回(3/4)）

如果你的组合可以根据其使用情况更改返回的内容会怎样?如果我们只需要一个值，它可以这样做。如果需要返回整个对象，它也能做到。

本文将介绍一种向可组合对象添加动态返回的模式。我们将了解何时使用该模式、如何实现它，并查看正在使用的模式的一些示例。

动态返回值的模式

这种模式延续了上一篇关于灵活参数的文章中 "为什么不两全其美？"的思路。一个可组合既可以返回一个单一的值，也可以返回一个值的对象。

// 返回一个值 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();