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