vue3自定义Hooks

　　比较简单的小demo，直接上代码吧

　　ts使用defineComponent，setup()里面使用 Composition API 写法，逻辑块清晰，不用前后文查找，拒绝 spaghetti code 

　　useCount

import { ref, Ref, watch } from "vue";

export interface CountRange {
    min: number;
    max: number;
}

interface Result {
    current: Ref;
    minus: (num: number) => void;
    plus: (num: number) => void;
    set: (num: number) => void;
    reset: () => void;
}

export function useCount(init: number, range: CountRange): Result {
    const current = ref(init);

    const minus = (num: number) => {
        current.value -= num;
    };
    const plus = (num: number) => {
        current.value += num;
    };
    const set = (num: number) => {
        current.value = num;
    };
    const reset = () => {
        current.value = init;
    };

    watch(current, (newVal: number, oldVal: number) => {
        if (newVal === oldVal) { return; }
        if (newVal < +range.min) {
            current.value = +range.min;
        } else if (newVal > +range.max) {
            current.value = +range.max;
        }
    });

    return { current, minus, plus, set, reset };
}

　　比较简单，ref传单一变量，reactive传复杂变量（对象），效果就是这样

　　再贴一下模板代码吧

　　使用vue和react的hooks之后，明显感觉vue的要简单明了很多，也不会有很多闭包问题、多次调用等，没有太多的限制，很容易上手。这一点做得比react好很多。