Vue3自定义hooks

1. 什么是自定义hooks？

以函数形式抽离一些可复用的方法像钩子一样挂着，随时可以引入和调用，实现高内聚低耦合的目标。

高内聚：指一个模块内部的功能应该尽可能相关，模块内的元素应紧密合作，完成单一且明确的任务。这样可以提高模块的可维护性和可重用性。

低耦合：指模块或组件之间的依赖性要低，即各个模块尽量独立，减少相互之间的影响。这样，当一个模块发生变化时，不会影响其他模块。

2. 操作步骤

将可复用功能抽离为外部JS文件(通常放在hooks文件夹)
文件名以use开头，比如：useDebounce
引用时将响应式变量或者方法显式解构暴露出来，比如：const { nameRef，Fn } = useDebounce()
(在setup函数里解构出自定义hooks的变量和方法)

3. 示例

简单的加减法计算，将加法和减法抽离为2个自定义Hooks，并且相互传递响应式数据。

3.1 加法功能-hook

// 加法功能hook
import { ref, watch } from 'vue'
const useSum = (num1, num2) => {

  const sumNum = ref(0)
  // [num1, num2] 同时监听多个ref
  // () => {} 的第一个参数是新的值，返回值是数组，使用[num1, num2]数组解构
  watch([num1, num2], ([num1, num2]) => {
    addFn(num1, num2)
  })
  const addFn = (num1, num2) => {
    sumNum.value = num1 + num2
  }
  return {
    sumNum,
    addFn
  }
}
export default useSum

3.2 减法功能-hook

// 减法功能hook
import { ref, watch } from 'vue'
const useSub = (num1, num2) => {

  const subNum = ref(0)
  // [num1, num2] 同时监听多个ref
  // () => {} 的第一个参数是新的值，返回值是数组，使用[num1, num2]数组解构
  watch([num1, num2], ([num1, num2]) => {
    subFn(num1, num2)
  })
  const subFn = (num1, num2) => {
    subNum.value = num1 - num2
  }
  return {
    subNum,
    subFn,
  }
}
export default useSub

3.3 加减法应用组件

<template>
  <div>
    num1: <input type="text" v-model.number="num1" />
    num2: <input type="text" v-model.number="num2" />
  </div>
  
  <span>加法等于: {{ sumNum }}</span>
  
  <span>减法等于: {{ subNum }}</span>
</template>

<script setup>
import { ref } from 'vue'
import useSum from './hooks/useSum.js'
import useSub from './hooks/useSub.js'

const num1 = ref(2)
const num2 = ref(4)

// 加法hook
const { sumNum, addFn } = useSum(num1, num2)
addFn(num1.value, num2.value)

// 减法hook
const { subNum, subFn } = useSub(num1, num2)
subFn(num1.value, num2.value)


</script>