Vue3自定义hooks

Vue 3的自定义hooks允许你封装可复用的逻辑（如状态管理、副作用处理等），以函数的形式导入并在组件中使用，增强了代码的可维护性和复用性。

封装前

<template>
  <div>
    <div>{{ sum }}</div>
    <button @click="changeNum">点我 + 1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref } from "vue";
  let sum = ref(0);
  function changeNum() {
    sum.value += 1;
  }
</script>

封装后

// person.vue
<template>
  <div>
    <div>{{ sum }}</div>
    <button @click="changeNum">点我 + 1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import useSum from '@/hooks/useSum'
  const {sum, changeNum} = useSum()
</script>

// hooks/useSum.ts
import { ref } from "vue";
export default function () {
  let sum = ref(0);
  function changeNum() {
    sum.value += 1;
  }
  return {
    sum,
    changeNum
  }
}