如果你的组合可以根据它的使用改变它返回的内容会怎样？如果我们只需要一个值，它可以这样做。如果它需要返回整个对象，它也可以这样做。本文介绍了一种用于向可组合对象添加动态返回的模式。我们将了解何时使用该模式、如何实现它，并查看该模式的一些使用示例。动态返回值的模式这种模式延续了“何不两全其美？”上一篇关于灵活参数的文章中的思路。可组合项可以返回单个值或值对象。//返回一个值constisDark=useDark();//返回多个值const{counter,pause,resume,}=useInterval(1000,{controls:true});这是一个很好的特性，因为我们可以控制复杂性。当需要简单时，要简单。当需要复杂性时，就变得复杂。VueUse的useInterval组合使用了这种模式。大多数时候，当使用useInterval时，我们只需要计数器。所以默认情况下它只返回这个。//默认行为constcounter=useInterval(1000);//1...//2...//3...如果你想暂停和重置计数器，你也可以通过控制参数来实现。const{counter,pause,resume,}=useInterval(1000,{controls:true});//1...//2...pause();//...resume();//3...//4...接下来我们看一下这个模式是如何实现的。实现要实现此模式，我们需要做两件事：向选项对象添加一个选项以将其打开。使用此选项更改返回行为。以下是大概的实现思路：exportdefaultuseComposable(input,options){//1.在`controls`选项中加入const{controls=false}=options;//...//2.返回单个值或对象if(controls){return{singleValue,anotherValue,andAnother};}else{返回单值；}}也许您想切换现有选项，而不是仅仅为此目的使用控件选项。也许使用三元表达式或比if语句更简洁的东西。也可能有一种完全不同的方式最适合您。此模式的重要之处在于切换，而不是切换方式。接下来，让我们看看VueUse的一些组合方法是如何实现这种模式的。useInterval首先，让我们深入了解useInterval的工作原理。在可以组合的最顶层，我们解构options对象，取出controls选项，重命名为exposeControls，默认值为false。const{controls:exposeControls=false,immediate=true,}=options;最后在if语句中判断exposeControls，如果为真则只返回counter等属性，否则只返回counter。如果(exposeControls){return{counter,...controls,};else{returncounter;}通过这两段代码，我们可以使用更灵活的return语句组合任何东西。现在，让我们看看useNow函数。useNow组合返回一个带有当前时间的Date对象，并大声更新。现在常量=useNow();默认情况下，它每帧更新一次——默认情况下每秒更新60次。我们可以更改更新频率，也可以暂停和恢复更新过程。const{现在，暂停，恢复}=useNow({controls:true});此组合的工作方式与useInterval组合非常相似。在内部，它们都使用VueUse公开的useIntervalFn帮助程序。首先，我们解构options对象得到controls选项，再次重命名为exposeControls，避免命名冲突。然后我们在可组合项的末尾返回。这里我们使用if语句在两种情况之间切换。如果(exposeControls){返回{现在，...控制，};else{returnnow;}如您所见，useInterval和useNow组合中此模式的实现几乎相同。VueUse中所有实现这种模式的组合都是以这种特殊的方式实现的。下面是我可以找到的在VueUse中实现此模式的所有可组合项的列表，供您自己进一步探索。useIntervaluseTimeoutuseNowuseTimestampuseTimeAgo总结我们看到动态返回值允许我们更灵活地选择如何使用可组合项。如果这是我们需要的，我们可以获得单个值。我们还可以获得包含值、方法和其他我们可能需要的东西的整个对象。但我们不只是看模式本身。我们看到了VueUse的useInterval和useNow组件是如何实现这种模式的。这种模式在大多数情况下非常适合简化我们的代码，同时在需要时仍然允许更大的复杂性。这有点像带抽屉的桌子。当你需要的时候，你可以在桌子上放很多东西。但您也可以将它们存放在抽屉中以保持整洁。
