到目前为止，可组合是组织Vue 3应用中业务逻辑的最佳方式，今天小编就来聊一聊关于vue3设计与实现?接下来我们就一起去研究一下吧!
vue3设计与实现
到目前为止，可组合是组织Vue 3应用中业务逻辑的最佳方式。
它们让你把小块的逻辑提取到函数中，我们可以轻松地重复使用，这样的代码更容易编写和阅读。
由于这种编写Vue代码的方式相对较新，你可能想知道在编写可组合代码的最佳做法是什么。本系列教程将作为一个指南，告诉你如何编写值得信赖且可靠组合式代码。
以下是我们将讨论的内容。
- 如何使用选项对象参数来使组合更有配置性
- 使用 ref 和 unref 来使我们的论证更加灵活
- 让返回值更有用的一个简单方法
- 为什么从接口开始会使我们组合会更强大
- 如何使用不需要 await 的异步代码--让你的代码更容易理解
首先， 我们先不看什么是可组合式？
什么是可组合式？根据Vue文档，可组合是 "利用Vue Composition API来封装和重用有状态逻辑的函数"。
这意味着任何使用响应式的代码都可以变成一个可组合的。
下面是一个来自Vue.js文档的useMouse可组合的简单例子。
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
return { x, y }
}
我们将状态定义为 refs，然后在鼠标移动时更新该状态。通过返回x和y refs，我们可以在任何组件（甚至是另一个可组合的组件）中使用它们。
下面是我们如何在一个组件中使用这个可组合的。
<template>
X: {{ x }} Y: {{ y }}
</template>
<script setup>
import { useMouse } from './useMouse';
const { x, y } = useMouse();
</script>
正如你所看到的，使用 useMouse 组合就可以重复使用所有这些逻辑。只需很少的额外代码，我们就能在我们的组件中抓取鼠标坐标。
选项对象参数大多数可组合程序有一个或两个必要的输入。然后有一系列的可选参数来帮助配置可组合的工作方式。
当配置你的可组合的时候，你可以传入一个选项对象，而不是传入一长串的参数，。
// 使用一个选项对象
const title = useTitle('A new title', { titleTemplate: '>> %s <<' });
// Title is now ">> A new title <<"
// 使用入一长串的参数
const title = useTitle('A new title', '>> %s <<');
// Title is now ">> A new title <<"
将选项作为一个整体对象而不是参数传入，给我们带来一些好处。
首先，我们不需要记住参数的正确顺序。现在有了TypeScript和编辑器自动完成功能，这已经不是一个问题了，但它仍然有区别。对于一个Javascript对象，键的顺序并不重要。
第二，代码更易读，因为我们知道这个选项是做什么的。代码即注释。我们不需要在源代码中寻找，也不需要依靠我们的IDE来让我们知道。
第三，以后再添加新的选项就容易多了。这既适用于向可组合本身添加新选项，也适用于在使用可组合时添加选项。
所以，使用一个选项对象会更好。但我们如何实现呢？
以可组合的方式实施下面是如何在一个可组合的中实现选项对象模式。
export function useMouse(options) {
const {
asArray = false,
throttle = false,
} = options;
// ...
};
在这里，如果参数是必需的，我们可以接受一两个参数，然后最后一个参数是选项对象。所以在这个例子中，useMouse没有必要的参数，只有选项对象。
下一步是分解选项对象。通过解构，我们可以访问所有的值，并明确地为每个可能的选项提供默认值。
现在，我们将看看VueUse中的两个不同的组合是如何应用该模式的。VueUse是Vue 3的一个开源组合集合，编写得非常好。它是学习如何编写可组合代码的一个很好的资源
https://vueuse.org/
首先，我们看看useTitle，然后再看看useRefHistory是如何工作的。
useTitleuseTitle是一个相当简单的组合。它用来更新页面的标题。
const title = useTitle('Initial Page Title'); // Title: "Initial Page Title" title.value = 'New Page Title'; // Title: "New Page Title"它也有几个选项以获得额外的灵活性。
可以提供一个 titleTemplate，还可以设置它来观察（observe）其他脚本可能做出的任何改变的标题（使用MutationObserver）。
const titleOptions = { titleTemplate: '>> %s <<', observe: true, };下面是使用选项对象的方式：
const title = useTitle('Initial Page Title', { titleTemplate: '>> %s <<', observe: true, }); // Title: ">> Initial Page Title <<" title.value = 'New Page Title'; // Title: ">> New Page Title <<"当你查看useTitle的源码时，它是这么做的：
export function useTitle(newTitle, options) { const { Document = defaultDocument, observe = false, titleTemplate = '%s', } = options; // ... }useTitle可组合式有一个必要的参数，然后是一个 options 对象。在这之后，它完全按照这里描述的模式实现其余部分。
现在让我们看看一个稍微复杂的可组合，它也使用这个选项对象模式。
useRefHistoryuseRefHistory 更有趣一些。它可以让你跟踪对一个 ref 所做的所有改变，可以容易地执行撤销和重做操作。
// Set up the count ref and track it const count = ref(0); const { undo } = useRefHistory(count); // Increment the count count.value ; // Log out the count, undo, and log again console.log(counter.value); // 1 undo(); console.log(counter.value); // 0此可组合可采用许多不同的选项
{ deep: false, flush: 'pre', capacity: -1, clone: false, // ... }我们可以把选项对象作为第二个参数传入，以进一步配置这个可组合的行为方式，与我们之前的例子一样。
const state = ref({}); const { undo, redo } = useRefHistory(state, { deep: true, // 追踪对象和数组内部的变化 capacity: 15, // 限制我们追踪的步骤数量 });如果我们看一下这个源代码，我们会发现它使用了与useTitle完全相同的对象重构模式。
export function useRefHistory(source, options) { const { deep = false, flush = 'pre', eventFilter, } = options; // ... }然而，在这个例子中，我们只在开始时从选项对象中抽出几个值。
这是因为useRefHistory在内部依赖于useManualRefHistory可组合程序。其余的选项将作为该可组合的选项对象在后面的可组合中传递。
把所有的东西集中起来
// ... const manualHistory = useManualRefHistory( source, { // Pass along the options object to another composable ...options, clone: options.clone || deep, setSource, }, ); // ...本文是我们“编写更好的组合”系列的第一部分。
我们研究了如何将一个选项对象作为参数添加到组件中，从而使组件的可配置性大大增强。例如，你不需要担心参数的排序，也不需要记住每个参数的作用，而且向一个对象添加更多的选项要比更新传入的参数容易得多。
但我们并不只是看了这个模式本身。我们还看到了VueUse的组合物 useTitle 和useRefHistory 是如何实现这一模式的。他们的方式略有不同，但由于这是一个简单的模式，你可以做的变化不多。
本系列的下一篇文章将探讨我们如何接受Refs和常规Javascript值作为参数。
// 传递一个 ref 值，可以工作 const countRef = ref(2); useCount(countRef); // 或者只给一个简单的数字 const countRef = useRef(2);这增加了灵活性，允许我们在应用程序的更多情况下使用组合。
作者：Michael Thiessen 译者：小智 来源：vuemastery 原文： https://www.vuemastery.com/blog/coding-btter-composables-1-of-5
,
