Vue 3.0中自定义Composition API

Composition API，全面拥抱函数式编程， VueConf发布的 Vue Vine 是更进一步，包含：

1. 可组合性：通过组合函数，可以将组件逻辑抽离成独立的函数。这些函数可以在多个组件中复用，提升了代码的可维护性；

2. 更好的逻辑组织：在 Options API 中，组件逻辑通常被分散在多个选项中，而 Composition API 允许将相关逻辑集中在一起，使代码更清晰；

3. 减少命名冲突：通过使用组合函数，每个组合函数都有自己独立的作用域，避免了全局命名空间的污染和命名冲突；

4. TypeScript 支持：Composition API 天然支持 TypeScript，提供了更好的类型推断和类型检查，提升了开发体验；

1. 自定义 Hook 的价值

在 Vue 3 中，自定义 Composition API Hook 提供了更好的代码复用性和逻辑分离。自定义 Hook 可以将与组件状态相关的逻辑提取出来，使代码更加模块化和可维护。相比于早期的 mixin，自定义 Hook 在以下几个方面有显著优势：

1. 清晰的依赖关系：自定义 Hook 使用函数的方式来定义，依赖关系更加显式，易于追踪和理解；

2. 避免命名冲突：自定义 Hook 的作用域是局部的，不会像 mixin 那样容易引起命名冲突；

3. 类型支持：TypeScript 支持更好，可以通过类型定义来增强代码的可靠性和可维护性；

2. 自定义 Hook 示例

我们以一个计数器为例，展示如何使用 Vue 3 Composition API 封装一个自定义 Hook。

2.1. 定义Hook

<script setup lang="ts">import { Ref, readonly, ref } from "vue";
const isNumber = (value: unknown): value is number => typeof value === "number";export interface UseCounterOptions {min?: number;max?: number;
}export interface UseCounterActions {inc: (delta?: number) => void;dec: (delta?: number) => void;set: (value: number | ((c: number) => number)) => void;reset: () => void;
}export type ValueParam = number | ((c: number) => number);function getTargetValue(val: number, options: UseCounterOptions = {}) {const { min, max } = options;let target = val;if (isNumber(max)) {target = Math.min(max, target);}if (isNumber(min)) {target = Math.max(min, target);}return target;
}function useCounter(initialValue = 0,options: UseCounterOptions = {}
): [Ref<number>, UseCounterActions] {const { min, max } = options;const current = ref(getTargetValue(initialValue, {min,max,}));const setValue = (value: ValueParam) => {const target = isNumber(value) ? value : value(current.value);current.value = getTargetValue(target, {max,min,});return current.value;};const inc = (delta = 1) => {setValue((c) => c + delta);};const dec = (delta = 1) => {setValue((c) => c - delta);};const set = (value: ValueParam) => {setValue(value);};const reset = () => {setValue(initialValue);};return [readonly(current),{inc,dec,set,reset,},];
}export default useCounter;</script>

2.2. 相关解释

1. 自定义 Hook 的定义：useCounter 函数定义了一个计数器，并返回当前计数和一组操作计数的函数；

2. 状态管理：使用 ref 来管理计数器的状态，并使用 readonly 确保外部不能直接修改状态；

3. 增减操作：inc 和 dec 函数分别实现了计数器的增加和减少操作，默认增减值为1；

4. 设定操作：set 函数允许直接设定计数器的值，支持传入一个函数来基于当前值进行计算；

5. 重置操作：reset 函数将计数器重置为初始值；

6. 数值范围限制：通过 getTargetValue 函数确保计数器的值在设定的最小值和最大值之间；

2.3. 使用Hook

<template><div><p>{{ current }} [max: 10; min: 1;}</p><div class="contain"><button @click="inc()">Inc()</button><button @click="dec()" style="margin-left: 8px">Dec()</button><button @click="set(3)" style="margin-left: 8px">Set(3)</button><button @click="reset()" style="margin-left: 8px">Reset()</button></div></div>
</template><script lang="ts" setup>
import useCounter from './useCounter'
const [current, { inc, dec, set, reset }] = useCounter(20, { min: 1, max: 10 })
</script>

3. 更多实例

import { ref } from "vue";export const useCopy = () => {const copied = ref(false);const copy = (text: string) => {navigator.clipboard.writeText(text);copied.value = true;setTimeout(() => {copied.value = false;}, 1000);};return {copied,copy,};
};