vue3设计与实现（用组合的方式来编写更好的代码）

到目前为止，可组合是组织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是如何工作的。

useTitle

useTitle是一个相当简单的组合。它用来更新页面的标题。

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 对象。在这之后，它完全按照这里描述的模式实现其余部分。

现在让我们看看一个稍微复杂的可组合，它也使用这个选项对象模式。

useRefHistory

useRefHistory 更有趣一些。它可以让你跟踪对一个 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

,