Vue3，用组合的方式来编写更好的代码(1/5)

前端小智@大迁世界

发布于 2022-06-27 09:20:56

7810

发布于 2022-06-27 09:20:56

文章被收录于专栏：终身学习者

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

到目前为止，可组合是组织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);

这增加了灵活性，允许我们在应用程序的更多情况下使用组合。

编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

作者：Michael Thiessen 译者：小智来源：vuemastery

原文： https://www.vuemastery.com/bl...

交流

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-25，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

https

网络安全

node.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度