到目前为止,可组合是组织Vue 3应用中业务逻辑的最佳方式,今天小编就来聊一聊关于vue3设计与实现?接下来我们就一起去研究一下吧!

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

vue3设计与实现

到目前为止,可组合是组织Vue 3应用中业务逻辑的最佳方式。

它们让你把小块的逻辑提取到函数中,我们可以轻松地重复使用,这样的代码更容易编写和阅读。

由于这种编写Vue代码的方式相对较新,你可能想知道在编写可组合代码的最佳做法是什么。本系列教程将作为一个指南,告诉你如何编写值得信赖且可靠组合式代码。

以下是我们将讨论的内容。

首先, 我们先不看什么是可组合式?

什么是可组合式?

根据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

,