vue3自定义Hooks

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

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

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { CountRange, useCount } from '@/composition/use-count';

export default defineComponent({
  name: 'Home',
  // components: {
  //   HelloWorld,
  // },
  props: {
    title2: String
  },
  data() {
    return {
      title1: 'this is title1'
    };
  },
  setup() {
    const title2 = ref('this is title2');

    const range: CountRange = reactive({
      min: 5,
      max: 50
    });

    const { current, minus, plus, set, reset } = useCount(10, range);

    return {
      title2,
      range,
      current,
      minus,
      plus,
      set,
      reset,
    };
  }
});
</script>

 

　　useCount

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

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

interface Result {
    current: Ref<number>;
    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传复杂变量（对象），效果就是这样

 

　　

　　再贴一下模板代码吧

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <h1>{{ title1 }}</h1>
    <h1>{{ title2 }}</h1>
    <p>current count: {{ current }}</p>
    <div>
      <label>MIN COUNT: </label>
      <input type="number" v-model="range.min" />
    </div>
    <br />
    <div>
      <label>MAX COUNT: </label>
      <input type="number" v-model="range.max" />
    </div>
    <br />
    <button @click="plus(5)">+5</button>
    <button @click="minus(3)">-3</button>
    <button @click="set(233)">set 233</button>
    <button @click="reset()">reset</button>
  </div>
</template>

 

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