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