有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。迄今为止，可组合项是在Vue3应用程序中组织业务逻辑的最佳方式。它们允许您将小块逻辑提取到我们可以轻松重用的函数中，从而使代码更易于编写和阅读。由于这种编写Vue代码的方式相对较新，您可能想知道编写可组合代码时的最佳实践是什么。本系列教程将指导您如何编写可信赖且可靠的可组合代码。这就是我们要讨论的内容。如何使用options对象参数让组合更可配置使用ref和unref让我们的参数更灵活一个让返回值更有用的简单方法为什么从接口开始让我们的组合更强大如何使用asyncwithoutawait代码--让你的代码更容易理解首先，我们先不要看什么是可组合的？什么是可组合的？根据Vue文档，可组合项是“利用VueCompositionAPI来封装和重用有状态逻辑的函数”。这意味着任何使用Reactive的代码都可以变成Composable。这是Vue.js文档中可组合的useMouse的一个简单示例。import{ref,onMounted,onUnmounted}from'vue'exportfunctionuseMouse(){constx=ref(0)consty=ref(0)functionupdate(event){x.value=event.pageXy.value=event.pageY}onMounted(()=>window.addEventListener('mousemove',update))onUnmounted(()=>window.removeEventListener('mousemove',update))return{x,y}}我们将状态定义为refs，然后在鼠标移动时更新该状态。通过返回x和yrefs，我们可以在任何组件（甚至是另一个可组合组件）中使用它们。以下是我们如何在组件中使用此可组合项。X:{{x}}Y:{{y}}如您所见，可以使用useMouse组合重用所有这些逻辑。只需很少的额外代码，我们就可以获取组件中的鼠标坐标。选项对象参数大多数可组合程序都有一个或两个必需的输入。然后是一系列可选参数来帮助配置可组合的工作方式。您可以在配置可组合项时传入一个选项对象，而不是传入一长串参数。//使用一个选项对象consttitle=useTitle('Anewtitle',{titleTemplate:'>>%s<<'});//Titleisnow">>Anewtitle<<"//UseinputLongstringofparametersconsttitle=useTitle('Anewtitle','>>%s<<');//Titleisnow">>Anewtitle<<"将选项作为整个对象而不是参数传递，这给我们带来了一些好处。首先，我们不需要记住参数的正确顺序。现在有了TypeScript和编辑器自动完成功能，这不是什么大问题，但它仍然有所作为。对于Javascript对象，键的顺序无关紧要。其次，代码更具可读性，因为我们知道选项的作用。代码是注释。我们不需要查看源代码或依赖我们的IDE让我们知道。第三，以后添加新选项要容易得多。这既适用于向可组合项本身添加新选项，也适用于在使用可组合项时添加选项。因此，最好使用选项对象。但是我们如何实现呢？在可组合项中实施以下是如何在可组合项中实施选项对象模式。导出函数useMouse(options){const{asArray=false,throttle=false,}=options;//...};这里我们可以接受一个或两个参数，如果需要参数，则最后一个参数是选项对象。所以在这个例子中，useMouse没有必要的参数，只有选项对象。下一步是分解选项对象。通过解构，我们可以访问所有值并为每个可能的选项显式提供默认值。现在，我们将看看如何在VueUse中以两种不同的组合应用该模式。VueUse是一个开源的Vue3合成合集，写的非常好。这是学习如何编写可组合代码的绝佳资源https://vueuse.org/首先，让我们看看useTitle，然后看看useRefHistory是如何工作的。useTitleuseTitle是一个相当简单的组合。它用于更新页面的标题。consttitle=useTitle('InitialPageTitle');//Title:"InitialPageTitle"title.value='NewPageTitle';//Title:"NewPageTitle"它还有几个额外的弹性选项。可以提供一个titleTemplate，它也可以设置为观察（观察）其他脚本可能对标题所做的任何更改（使用MutationObserver）。consttitleOptions={titleTemplate:'>>%s<<',observe:true,};以下是如何使用选项对象：consttitle=useTitle('InitialPageTitle',{titleTemplate:'>>%s<<',observe:true,});//Title:">>InitialPageTitle<<"title.value='NewPageTitle';//Title:">>NewPageTitle<<"当你查看useTitle的源码时，它是这样做的：exportfunctionuseTitle(newTitle,options){const{document=defaultDocument,observe=false,titleTemplate='%s',}=options;//...}useTitle可以与一个必需的参数结合使用，后跟一个选项对象。之后，它会完全按照此处描述的模式执行其余部分。现在让我们来看一个稍微复杂一些的可组合项，它也使用了这个选项对象模式。useRefHistoryuseRefHistory更有趣一点。它使您可以跟踪对ref所做的所有更改，从而可以轻松进行撤消和重做操作。//设置计数ref并跟踪它constcount=ref(0);const{undo}=useRefHistory(count);//增加countcount.value++;//注销计数，撤消并再次记录console.log（计数器值）；//1撤销();控制台日志（计数器值）；//0这个可组合项可以采用许多不同的选项{deep:false,flush:'pre',capacity:-1,clone:false,//...}我们可以传入一个选项对象作为第二个参数来进一步配置这个可组合项的行为方式，如我们之前的示例所示。常量状态=ref({});const{undo,redo}=useRefHistory(state,{deep:true,//跟踪对象和数组内部的变化capacity:15,//限制我们跟踪的步数});if我们看一下源码，会发现它使用了和useTitle一模一样的对象重构模式。导出函数useRefHistory(source,options){const{deep=false,flush='pre',eventFilter,}=options;//...}但是，在这个例子中，我们只从开头的选项对象中提取了几个值。这是因为useRefHistory在内部依赖于useManualRefHistory可组合项。其余选项将作为此可组合项的选项对象传递到后续可组合项中。//...constmanualHistory=useManualRefHistory(source,{//将选项对象传递给另一个可组合...options,clone:options.clone||deep,setSource,},);//...passall这篇文章是我们“写出更好的作文”系列的第一篇。我们研究了如何将选项对象作为参数添加到组件中，从而使其更易于配置。例如，您无需担心参数的顺序，或记住每个参数的作用，并且向对象添加更多选项比更新传入参数要容易得多。但我们不只是看模式本身。我们还看到了VueUse组合useTitle和useRefHistory如何实现这个模式。他们的方法略有不同，但由于这是一个简单的模式，您可以做的更改并不多。本系列的下一篇文章将探讨我们如何接受Refs和常规Javascript值作为参数。//传递一个ref值，可以工作constcountRef=ref(2);使用计数（计数参考）；//或者只给出一个简单的数字constcountRef=useRef(2);这增加了灵活性，并允许我们在更多情况下使用组合。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。作者：MichaelThiessen译者：小智来源：vuemastery原文：https://www.vuemastery.com/bl...交流有梦想，有干货，微信搜索【大招天下】关注这个我在还在清晨洗碗洗碗的智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
