Vue3 debe aprender habilidades - Hooks personalizados

1. Introducción:

El funcionario no especifica claramente qué es un gancho personalizado, que es esencialmente una función, generalmente utilizada junto con la API de Composición,

Extraiga la lógica reutilizable en la función de configuración e introdúzcala y llámela a pedido para reducir el acoplamiento de código. Específicamente:

• Extraiga la lógica del código reutilizable en archivos ts externos;

• El nombre de la función/nombre del archivo comienza con use, como useDialog;

• Las variables y los métodos de respuesta se deconstruyen en la función de configuración, como const { visible } = useDialog(false);

2. Ejemplos específicos

Implemente la función de ganchos que pueden controlar la apertura y el cierre de ventanas emergentes. Primero, cree una nueva carpeta de ganchos en el proyecto, cree un nuevo archivo ts debajo de la carpeta y encapsule ganchos personalizados en cada archivo, como se muestra en el archivo useDialog.ts en la figura a continuación.

A continuación, defina la función useDialog en el archivo y expóngala a llamadas externas. La función encapsula internamente métodos reutilizables, como controlar la visualización o el cierre de ventanas emergentes.

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,
    };
}

Como se indicó anteriormente, se completa el paquete de ganchos personalizados que pueden controlar el cierre de la ventana emergente. Las páginas relevantes pueden introducir y llamar a funciones de enganche según sea necesario. Por ejemplo, la página que se muestra en la siguiente figura presenta la función useDialog y deconstruye las variables y métodos de respuesta requeridos en la función de configuración.

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