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

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

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

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

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

• 如何使用选项对象参数来使组合更有配置性
• 使用 ref 和 unref 来使我们的论证更加灵活
• 让返回值更有用的一个简单方法
• 为什么从接口开始会使我们组合会更强大
• 如何使用不需要 await 的异步代码--让你的代码更容易理解

什么是可组合式？

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 }
}

<template>
  X: {{ x }} Y: {{ y }}
</template>

<script setup>
  import { useMouse } from './useMouse';
  const { x, y } = useMouse();
</script>

选项对象参数

// 使用一个选项对象
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 <<"

将选项作为一个整体对象而不是参数传入，给我们带来一些好处。

以可组合的方式实施

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

  // ...
};

useTitle

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

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

它也有几个选项以获得额外的灵活性。

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

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

我们可以把选项对象作为第二个参数传入，以进一步配置这个可组合的行为方式，与我们之前的例子一样。

const state = ref({});
const { undo, redo } = useRefHistory(state, {
  deep: true,    // 追踪对象和数组内部的变化
  capacity: 15,  // 限制我们追踪的步骤数量
});

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

// ...

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

// ...

把所有的东西集中起来

// 传递一个 ref 值，可以工作
const countRef = ref(2);
useCount(countRef);

// 或者只给一个简单的数字
const countRef = useRef(2);