关于javascript:Vue3组合式函数最佳实践一

截至目前，组合式函数应该是在 VUE 3 应用程序中组织业务逻辑最佳的办法。
它让咱们能够把一些小块的通用逻辑进行抽离、复用，使咱们的代码更易于编写、浏览和保护。
因为这种编写 VUE 代码的形式绝对较新，因而您可能想晓得编写组合式函数的最佳实际是什么呢？本系列教程能够作为您和您的团队在进行组合式开发过程中的参考指南。
咱们将涵盖以下内容：

1. 如何通过选项对象参数使您的组合更加可配置；👈 本篇主题
2. 应用 ref 和 unref 使咱们的参数更加灵便；
3. 如何使你的返回值更有用；
4. 为什么从接口定义开始能够使你的组合式函数更弱小；
5. 如何应用异步代码而无需“期待”– 使您的代码更易于了解；

不过，首先，咱们须要确保咱们对组合式函数的了解是统一的。咱们先花点工夫解释一下什么是组合式函数。

依据官网文档阐明，在 Vue 利用的概念中，“组合式函数”是一个利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。
这就意味着，任何有状态逻辑，并且应用了响应式解决的逻辑都能够转换成组合式函数。这和咱们平时抽离封装的公共办法还是有一些区别的。咱们封装的公共办法往往是无状态的：它在接管一些输出后立即返回所冀望的输入。而组合式函数往往是和状态逻辑关联的。

让咱们看看官网给出的 useMouse 这个组合式函数：

import {ref, onMounted, onUnmounted} from 'vue'

// 依照常规，组合式函数名以“use”结尾
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，咱们能够在任何组件中应用它们，甚至咱们还能够把多个组合式函数嵌套应用。

当咱们在组件中应用时

<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 对象，参数的程序就不那么重要了。（当然，这也要求咱们的函数定义须要清晰明了，咱们前面谈判）
其次，代码更可读取，因为咱们晓得该选项的作用是什么。
第三，代码扩展性更好，当前增加新的选项要容易得多。这既实用于为组合式函数自身增加新选项，又实用于嵌套应用时参数传递。

因而，应用对象参数更加敌对，然而咱们该如何来实现呢？

当初让咱们看下如何在组合式函数中应用选项对象参数。咱们来给下面的 useMouse 进行一些扩大：

export function useMouse(options) {
  const {
    asArray = false,
    throttle = false,
  } = options;

  // ...
};

useMouse自身没有必传参数，所以咱们间接给它减少一个 options 参数来进行一些额定的配置。通过解构，咱们能够拜访所有的选传参数，并且为每个参数设置了默认值，这就防止了有些不须要额定配置的调用时没有传入可选参数的状况。

当初让咱们来看两个 VueUse 下面的组合式函数是如何应用这个模式的。VueUse 是一个服务于 Vue3 的组合式函数的常用工具集，它的初衷就是将所有本来并不反对响应式的 JS API 变得反对响应式，省去程序员本人写相干代码。

咱们先来看 useTitle，而后再看一下useRefHistory 是如何实现的。

useTitle的作用非常简单，就是用来更新页面的题目。

const title = useTitle('Initial Page Title');
// Title: "Initial Page Title"

title.value = 'New Page Title';
// Title: "New Page Title"

它也有几个抉择参数，来促成额定的灵活性。咱们能够传入 titleTemplate 作为模版，并且通过 observe 来将其设置称为具备察看性（外部通过 MutationObserver 实现）：

const title = useTitle('Initial Page Title', {
  titleTemplate: '>> %s <<',
  observe: true,
});
// Title: ">> Initial Page Title <<"

title.value = 'New Page Title';
// Title: ">> New Page Title <<"

当咱们查看它的源码的时候能够看到以下解决

export function useTitle(newTitle, options) {
  const {
    document = defaultDocument,
    observe = false,
    titleTemplate = '%s',
  } = options;
  
  // ...
}

useTitle蕴含一个必传的参数，以及一个可选参数对象。正如咱们下面形容的那样，它齐全是依照这个模式来实现的。
接下来，让咱们看一下一个更简单的组合式函数是如何应用选项对象模式的。

useRefHistory能够帮忙咱们追踪一个响应式变量的所有更改，能够让咱们轻松的执行撤销和复原的操作。

// 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,
  // ...
}

如果想晓得这些选项参数的残缺列表和对应的性能，能够去查看相干文档，在此不再赘述。

咱们能够将选项对象作为第二个参数传递，以进一步配置该组合函数的行为，与咱们上一个示例雷同：

export function useRefHistory(source, options) {
  const {
    deep = false,
    flush = 'pre',
    eventFilter,
  } = options;
 
  // ...
}

咱们能够看到它外部仅仅解构出了一部分参数值，这是因为 useRefHistory 外部依赖了 useManualHistory 这个组合式函数，其余的选项参数将在前面透传给 useManualHistory 时进行开展合并。

// ...

const manualHistory = useManualRefHistory(
  source,
  {
    // Pass along the options object to another composable
    ...options,
    clone: options.clone || deep,
    setSource,
  },
);

// ...

这也和咱们后面说到的内容相符：组合式函数能够嵌套应用。

本文是“组合式函数最佳实际”的第一局部。咱们钻研了如何通过选项对象参数晋升组合式函数的灵活性。毋庸放心参数程序不对导致的问题，并且能够灵便进行配置项的减少扩大。咱们不仅仅钻研了这个模式自身，咱们还通过 VueUse 中的 useTitle 和useRefHistory来学习了如何实现此模式。它们略有不同，然而这个模式自身就是很简略的，咱们通过它能做到也是无限的。

下一篇咱们将介绍如何通过 ref 和 unref 使咱们的参数更加灵便

// Works if we give it a ref we already have
const countRef = ref(2);
useCount(countRef);

// Also works if we give it just a number
const countRef = useRef(2);

这减少了灵活性，使咱们可能在应用程序中的更多状况下应用咱们的组合。

关于javascript:Vue3组合式函数最佳实践一

什么是“组合式函数”？

选项对象参数

在组合式函数中的实现

举例 -useTitle

举例 -useRefHistory

小结

Just My Socks（注册教程内含优惠码）

关于javascript:Vue3组合式函数最佳实践一

什么是“组合式函数”？

选项对象参数

在组合式函数中的实现

举例 -useTitle

举例 -useRefHistory

小结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）