关于前端:Vue3用组合的方式来编写更好的代码15

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。