Vue3必学技巧—自定义Hooks

1、前言：

官方没有明确指明什么是自定义hooks，其本质上是一个函数，通常结合Composition API使用，

抽离setup函数中可复用逻辑，按需引入和调用来降低代码耦合度。具体为：

• 将可复用的代码逻辑抽离成外部ts文件；

• 函数名/文件名以use开头，比如useDialog；

• setup函数中解构出响应式变量和方法，比如const { visible } = useDialog(false);

2、具体实例

实现可控制弹窗打开和关闭的hooks函数。首先在项目里新建hooks文件夹，在文件夹下新建ts文件，每个文件中封装一个自定义hooks，如下图中useDialog.ts文件。

然后在文件中定义useDialog函数并暴露给外部调用，函数内部封装控制弹窗展示/关闭等可复用方法。

import { ref } from 'vue';

export function useDialog(initValue: boolean) {
    const dialogVisible = ref(initValue);
    function openDialog() {
        dialogVisible.value = true;
    }
    function closeDialog() {
        dialogVisible.value = false;
    }
    function toggleDialog() {
        dialogVisible.value = !dialogVisible.value;
    }
    return {
        dialogVisible,
        openDialog,
        closeDialog,
        toggleDialog,
    };
}

如上完成了可控制弹窗闭合的自定义hooks封装。相关页面便可按需引入和调用hooks函数，例如下图所示页面引入useDialog函数，在setup函数中解构出所需的响应式变量和方法。

import { useDialog } from '@/hooks/use-dialog';
setup(){
    const { dialogVisible, openDialog } = useDialog(false);
    return {};
}