1、hooks 就是钩子的意思 2、你可以将它想象成用来触发的一种工具 3、hooks 是一个独立的文件 4、hooks 的逻辑是可复用的,可以想象成是函数的封装 5、hooks 可以封装数据和变量 5、hooks 的文件名以及函数名以 use 开头,例如:useTheme.js / useTheme()
封装函数
在项目中经常碰到相同逻辑的功能,有的同学可能会将该功能封装成函数,单独放到 utils 或者某 js 文件中,在相同逻辑的地方复用。这种复用的意识其实就是 hooks 的一种。这里举一个正常函数封装的例子:
// @/utils.js
// 数组去重
export const arrSet = (v) => {
return [...new Set(v)]
}
// 页面
import { arrSet } from "@/utils.js"
// 使用
const getList = () => {
let arr = [3,4,5,3,7,5,8]
arr = arrSet(arr); // 使用函数
}
复制代码
正常的引入 import 引入对应的函数,你可能在一个页面引入多个工具函数,例如:
import { arrSet, arrObjSet, somethingSet } from "@/utils.js"
复制代码
hooks 其实也是类似的形式,只不过是封装成函数的形式:useTheme()的形式将工具函数解构出来这里我来展示如何封装 hooks
// useTheme.js
export const useTheme = () => {
// 数组去重
const arrSet = (v) => {
return [...new Set(v)]
}
// 数组对象去重
const arrObjSet = (v) => {
return [...new Set(v.map(el=> JSON.stringify(el)))].map(el=> JSON.parse(el))
}
// 其它函数...
return {
arrSet,
arrObjSet
// 其它函数...
}
}
复制代码
页面使用:
import { useTheme } from "@/hooks/useTheme.js
// 使用
const getList = () => {
let { arrSet } = useTheme();
let arr = [3,4,5,3,7,5,8]
arr = arrSet(arr); // 使用函数
}
复制代码
你可以看到,hooks 其实就是函数封装的一种,只不过是另一种实现方式。
封装变量
你可以在 hooks 内部完成响应式数据封装,通过 hooks 复用数据,简化页面代码,这里我以 vue3 项目为例,完成 hooks 响应式变量的封装
// useList.js
import { reactive, toRefs } from "vue";
export const useList = () => {
const state = reactive({
// 表格数据
tableData: [],
// 分页数据
pageInfo: {
// 当前页数
pageNum: 1,
// 每页显示条数
pageSize: 10,
// 总条数
total: 0
},
});
// 其它函数...
return {
...toRefs(state),
// 其它函数...
}
}
复制代码
页面使用:
import { useList } from "@/hooks/useList.js
const {tableData, pageInfo} = useList()
console.log(useList())
复制代码
这里我用了 toRefs 将数据转换成响应且可解构的形式,并且用剩余运算符...将数据全部解构出来,在页面中就可以直接使用响应式数据
<template>
<div>{{pageInfo}}</div>
</template>
复制代码
hooks 在项目中的角色
过大的单文件是其实是不利于维护的,各种变量、函数混在一起,hooks 就可以把它们全部抽出来,将碎片化的变量、函数封装起来,分区分块,你可以把 hooks 想象成一个钩子,要用的时候触发它,使用 hooks 就可实现高内聚、低耦合。
技术前沿拓展
前端开发,你的认知不能仅局限于技术内,需要发散思维了解技术圈的前沿知识。细心的人会发现,开发内部工具的过程中,大量的页面、场景、组件等在不断重复,这种重复造轮子的工作,浪费工程师的大量时间。
介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。
这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类,方便扩展;集成了代码生成器,支持前后端业务代码生成,实现快速开发,提升工作效率;框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用;后端框架支持 Vue2、Vue3。如果你有闲暇时间,可以做个知识拓展。
看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~
评论