自定义hook函数

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
• 类似于vue2.x中的mixin。
• 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

Vue2时代Option Api ，data、methos、watch.....分开写，这种是碎片化的分散的，代码一多就容易高耦合，维护时来回切换代码是繁琐的！

Vue3时代Composition Api，通过利用各种Hooks和自定义Hooks将碎片化的响应式变量和方法按功能分块写，实现高内聚低耦合

用法

1. 将可复用功能抽离为外部JS文件
2. 函数名/文件名以use开头，形如：useXX
3. 引用时将响应式变量或者方法显式解构暴露出来如：const {nameRef，Fn} = useXX()

实例

加法功能-Hook

import { ref, watch } from 'vue';
const useAdd= ({ num1, num2 })  =>{
    const addNum = ref(0)
    watch([num1, num2], ([num1, num2]) => {
        addFn(num1, num2)
    })
    const addFn = (num1, num2) => {
        addNum.value = num1 + num2
    }
    return {
        addNum,
        addFn
    }
}
export default useAdd

减法功能-Hook

//减法功能-Hook
import { ref, watch } from 'vue';
export function useSub  ({ num1, num2 }){
    const subNum = ref(0)
    watch([num1, num2], ([num1, num2]) => {
        subFn(num1, num2)
    })
    const subFn = (num1, num2) => {
        subNum.value = num1 - num2
    }
    return {
        subNum,
        subFn
    }
}

加减法计算组件

<template>
    <div>
        num1:<input v-model.number="num1" style="width:100px" />
        <br />
        num2:<input v-model.number="num2" style="width:100px" />
    </div>
    <span>加法等于:{{ addNum }}</span>
    <br />
    <span>减法等于:{{ subNum }}</span>
</template>
<script setup>
import { ref } from 'vue'
import useAdd from './useAdd.js'     //引入自动hook 
import { useSub } from './useSub.js' //引入自动hook 
const num1 = ref(2)
const num2 = ref(1)
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)
//减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)
const { subNum, subFn } = useSub({ num1, num2 })
subFn(num1.value, num2.value)
</script>