本文主要是介绍vue3第二十六节(Hooks 封装注意事项),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1、什么是 Hooks
Hooks
最先提出的是React
,在 React 16
之后提出了所有以use 开头定义的函数,用于复杂功能编写、函数组件中状态管理共用、副作用处理而抽离的共用的单一功能可复用的函数;
2、Hooks 与 mixins Class 在应用中的差异
在vue2
中的 mixins Class
主要有以下缺点:
a、数据来源不清晰:在一个单文件组件中引入多个 mixins
或者 class
时候,想要追踪一个方法或者属性的来源,梳理追踪会比较麻烦导致维护困难;
b、命名空间方法属性污染:多个mixins|Class
时,不引入不同的文件可能导致 相同的方法属性名冲突,从而导致执行的效果不是自己书写的理想效果;
c、不同模块的数据流:多个mixins | Class
时,不同模块之间的相互作用,会有意向不到的执行顺序效果,导致调试困难;
vue3
中 已经移除 mixins
,不要组合式API 与 选项式API 混合使用;
优点:
代码功能可扩展性强,功能可以复用;
Hooks
优点:
a、数据源清晰:Hooks
不是一个类,没有将状态、方法存放在对象中,然后通过导出对象的形式实现复用,也就不会有对象间过度耦合、干扰等问题。Hooks
中的各类状态是封装在内部的,与外界隔离,仅暴露部分函数、变量,这使得其来源、功能清晰可辨且不易被干扰
b、没有命名冲突的问题:Hooks
本质是闭包函数,内部所导出的变量、方法支持重命名,因而同一个Hooks
在同一个组件中可以N次使用而不冲突
c、精简逻辑:一个Hooks
开发完成后,在使用Hooks
时不需要关心其内部逻辑,只需知道有什么效果、如何使用即可,专注于其他核心业务逻辑,可以节省大量重复代码;
d、更好的类型支持:TypeScript
可以更好的处理 Hooks
缺点:
对于不熟悉Hooks
的开发者来说,可能会导致代码难以阅读和理解。
学习曲线较陡峭,需要熟悉新的编程模式和思维方式。
对于小型项目或简单组件,使用Hooks
可能过于复杂。
在Vue生态中,第三方Hooks的质量和兼容性可能存在差异。
3、Hooks 应用场景
a、逻辑复用:当多个组件需要共享相同的逻辑时,我们可以将这些逻辑封装成一个Hooks
,然后在需要的组件中导入并使用它。这样可以避免代码重复,提高代码的复用性。
b、逻辑拆分:对于复杂的组件,我们可以使用Hooks
将组件的逻辑拆分成多个独立的函数,每个函数负责处理一部分逻辑。这样可以使组件的代码更加清晰、易于维护。
c、副作用管理:Hooks
中的函数可以访问组件的响应式数据,并且可以在组件的生命周期中执行副作用操作(如定时器、事件监听等)。通过使用Hooks,我们可以更好地管理这些副作用操作,确保它们在组件卸载时得到正确的清理。
4、Hooks 书写规范
a、命名规范:自定义Hooks
应该以“use”
为前缀,以区分其他函数和变量。例如:useUserInfo
、useMousePosition
等。同时,命名应清晰明了,准确描述Hooks
的功能。
b、参数与返回值:自定义Hooks
应该接收明确的参数,并返回需要在组件中使用的响应式数据、方法、计算属性等。返回的对象应该具有清晰的属性名和结构。
c、文档注释:为自定义Hooks
编写清晰的文档注释是非常重要的,说明其用途、参数、返回值和使用示例。这将有助于其他开发者理解和使用你的自定义Hooks
。
d、类型定义(如果使用TypeScript):为自定义Hooks
提供类型定义可以确保更好的类型安全性和编辑器支持。使用TypeScript
的泛型功能可以增加Hooks
的灵活性和可复用性。
e、测试:为自定义Hooks
编写单元测试是确保其正确性和稳定性的重要手段。测试应该覆盖各种使用场景和边界情况。
f、单一功能:Hooks
是单一功能的,不要给一个Hooks
设计过多功能。单个Hooks
只负责做一件事,复杂的功能可以使用多个Hooks
互相组合实现,如果给单个Hooks
增加过多功能,又会陷入过于臃肿、使用成本高、难维护的问题中
5、示例:
import { ref } from 'vue'
const getItem = (key: string, storage: any) => {let value = storage.getItem(key)if (!value) {return null}try {return JSON.parse(value)} catch(error) {return value}
}
export const useStorage = (key:string, type ="session") => {let storage = null;switch(type) {case 'session':storage = sessionStorage;break;case 'local':storage = localStorage;break;default:return null;}const value = ref(getItem(key, storage))const setItem = (storage: any) => {return (newValue: any) => {value.value= newValue;storage.setItem(key, JSON.stringify(newValue))}}return [value,setItem(storage)]
}
// 使用
// const [token, setItem] = useStorage('token');
// setItem('new token');
推荐使用vueuse.js
里面封装好的Hooks
这篇关于vue3第二十六节(Hooks 封装注意事项)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!