当前位置：首页 > news >正文

Vue3自定义hooks

news 来源：原创 2024/9/19 22:12:51

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>