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
就可实现高内聚、低耦合。
原文链接:https://juejin.cn/post/7345388391804846117 作者:DCodes