Vue3中的自定义Hooks

为什么要使用Hooks？

1. 组件复用性更强：通过Hooks可以使得组件的一些逻辑可以更好地进行封装和复用

2. 更好的逻辑分离。Hooks有助于组件内的业务逻辑更加清晰明了，从而减少代码耦合度。

3. 更高的代码可读性。使用Hooks使得函数组件的可读性更高，在保证性能和灵活性的情况下，增加了代码的可读性。

?一、使用hooks

在当前组件或根组件下新建一个hooks文件夹，用来存放相关文件

1.文件内容

import { reactive, ref } from 'vue'
export default function(){
  let sum = ref(0)
  function addSum(){
    sum.value++
  }
  // 向外部返回内容
  return {sum,addSum}
}

2.组件中使用hooks

<template>
  <div class="">
    <p>当前值为：{{ sum }}</p>
    <button @click="addSum">sum++</button>
  </div>
</template>

<script setup lang="ts">
import useSum from "@/hooks/useSum";
// 数据相关
const {sum,addSum} = useSum()

</script>
<style lang="scss" scoped>
.width-100{
  width: 100px;
}
</style>