,如果你的组合可以根据其使用情况更改返回的内容会怎样?如果我们只需要一个值，它可以这样做。如果需要返回整个对象，它也能做到。,本文将介绍一种向可组合对象添加动态返回的模式。我们将了解何时使用该模式、如何实现它，并查看正在使用的模式的一些示例。,这种模式延续了上一篇关于灵活参数的文章中 "为什么不两全其美？"的思路。一个可组合既可以返回一个单一的值，也可以返回一个值的对象。,这是一个不错的功能，因为我们可以控制复杂程度。当需要的是简单的时候，就简单。当需要复杂性时，则是复杂的。,VueUse的useInterval组合就是使用了这种模式。,大多数时候，在使用useInterval时，我们只需要 counter。所以默认情况下，它只是返回这个。,如果你想暂停和重置 counter，也可以通过 controls 参数来做到这一点。,接下来，我们来看看这种模式怎么实现。,为了实现这一模式，我们需要做两件事：,下面是大概的实现思路：,也许你想在一个现有的选项上进行切换，而不是只为这个目的使用一个 controls 选项。也许使用三元表达式或比 if 语句更简洁。也可能有一种完全不同的方式最适合你。这种模式的重要之处在于切换，而不是切换的方式。,接下来，让我们看看VueUse的一些组合方法如何实现这一模式。,首先，让我们深入了解一下useInterval的工作原理。,在可组合的最顶层，我们对 options 对象进行解构，取出 controls 选项并将其重命名为exposeControls，默认值为 false.,最后，在if语句，判断 exposeControls，如果为 true 刚返回 counter 及其它属性，否则只返回 counter。,有了这两段代码，我们可以使任何可组合的有一个更灵活的返回语句。,现在，在来看看 useNow 函数。,useNow 组合式返回一个现在时间 Date 对象，并进行响度式式更新。,默认情况下，它每一帧都会自我更新--默认每秒60次。我们可以改变它的更新频率，也可以暂停和恢复更新过程。,这个组合的工作方式与 useInterval 组合非常相似。在内部，它们都使用VueUse暴露的useIntervalFn 帮助器。,首先，我们对options对象进行解构，得到controls选项，再次将其更名为exposeControls，以避免命名冲突。,然后我们在可组合的结束时返回。这里我们使用if语句在两种情况之间切换。,正如你所看到的，这种模式在useInterval和useNow组合中的实现几乎是一样的。VueUse中所有实现这种模式的组合物都是以这种特殊方式实现的。,下面是我能找到的所有在VueUse中实现这种模式的可组合的列表，供你自己进一步探索。,我们看到，动态返回值让我们可以更灵活地选择如何使用可组合。我们可以得到一个单一的值，如果这就是我们需要的。我们也可以得到一个包含值、方法和其他我们可能想要的东西的整个对象。,但我们并不只是看了这个模式本身。我们看到了VueUse的useInterval和useNow组件是如何实现这一模式的。,这种模式非常适合在大多数情况下简化我们的代码，同时在需要的时候仍然允许更大的复杂性。这有点像一张带抽屉的桌子。当你需要的时候，你可以把很多东西放在桌子上。但你也可以把它们放在抽屉里以保持整洁。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
