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

Vue3 Hooks函数使用及封装

news 来源：原创 2024/5/20 12:16:33

1. 什么是hooks函数？

将单独功能的js代码抽离出来，加工成公共函数，从而达到逻辑复用。

有了composition API 意味着我们就可以自定义封装hooks，最终的目的都是进行复用，在Vue2中复用的方式大部分都是采取的mixin，但相比hooks,hooks更清楚复用的功能来源及功能。

2.封装一个hooks函数

hooks封装规范：

新建hooks文件；
新建文件名前缀加上use+上文件里内容的简意；
合理利用Vue提供的响应式函数及生命周期；
暴露出变量和方法提供外部需要时使用；

如： src/hooks/useSum.ts
意思就是创建一个数据内容的hooks文件

不带参数的hooks的封装

import { ref } from 'vue'
export default function () {// 数据const addSum = ref(0)// 方法function sum() {addSum.value +=  1}// 向外部提供 东西return {sum,addSum}
}

vue文件引入hooks文件

<template><div class="app"><el-button type="success" @click="sum">求和</el-button><span>加法等于:{{ addSum }}</span></div>
</template><script lang="ts" setup>
import { ref } from 'vue'
import useSum from '@/hooks/useSum'
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { sum, addSum } = useSum()
</script><style lang="scss" scoped></style>

实现

带参数的hooks的封装

ts文件

import { Ref, ref } from 'vue';
const useAdd = (num1: Ref<number>, num2: Ref<number> ) => {const addNum = ref(0)const addFn = (num1: number, num2: number) => {addNum.value = num1 + num2}return {addNum,addFn}
}
export default useAdd

vue文件

<template><div class="app"><el-button type="success" @click="addFn(num1, num2)">求和</el-button><span>加法等于:{{ addNum }}</span></div>
</template><script lang="ts" setup>
import { ref } from 'vue'
import  useAdd  from '../../hooks/map'
const num1 = ref(2)
const num2 = ref(1)
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd(num1, num2)
</script><style lang="scss" scoped></style>