El uso de ganchos en Vue3 y los hoyos encontrados en uso

prefacio

Al aprender Es6, comenzamos a usar clases y objetos, y comenzamos la gestión modular; en Vue, podemos usar mixin para la gestión modular; en Vue3, también existe la gestión modular, que requiere el uso de funciones de enlace.

Esta sección del blog explicará la función de gancho en Vue 3. En la explicación, se intercalarán las trampas encontradas en el uso de ganchos y las cosas que necesitan atención. (parte amarilla)

1. ¿Qué es un anzuelo?

La esencia de hook es una función que encapsula la API de composición utilizada en la función de configuración, similar a mixin en Vue2.

En segundo lugar, el uso de la función de gancho.

2.1 Ropa de cama

Primero escribamos un código muy simple:

<template>
  <div>我是App组件</div>
  <div>sum的值为{
    
    {
    
     sum }}</div>
  <button @click="add">点击sum的值加1</button>
</template>

<script>
import {
    
    ref} from 'vue'
export default {
    
    
    name: 'App',
    setup() {
    
    
        let sum = ref(0)
        function add() {
    
    
            sum.value ++
        }

        return {
    
    sum, add}
    }
}
</script>

<style>

</style>

El código anterior simplemente define una suma con ref, y establece un botón.Si se hace clic, el valor de la suma se puede aumentar en uno.

Si ahora hay cinco componentes que necesitan implementar funciones similares, me gustaría preguntarles a todos, ¿debería copiar y pegar este código cinco veces?

De hecho, no es necesario. Los lectores que entienden la gestión modular pueden adivinar que también se puede implementar en Vue3. El código solo se escribe una vez, y la función que se puede reutilizar cuando sea necesario es la función de enlace.

Y mira la explicación de la función gancho.

2.2 Cómo escribir la función gancho

Es muy simple. Primero, creamos una carpeta llamada ganchos y creamos un archivo js dentro. El nombre del archivo js se puede seleccionar de acuerdo con la función: pegue la

parte sobre la suma que acabamos de escribir en este archivo js:

A continuación, ponemos estos contenidos en una función y los exponemos, preste atención a:ref debe citarse antes de que pueda usarse, y aún debe introducirse en el archivo js.

No olvides devolver lo que necesites:

Arriba, el archivo ha sido escrito.

2.3 Usar la función de gancho escrito

A continuación, usaremos el módulo addSum que acabamos de escribir en App.vue.

Hay tres pasos en total: referenciar, recibir y exponer.

Primero, comillas: importar en el componente App.vue:

Segundo, recibir, ¡es particularmente propenso a errores aquí! !
Aquí debo enfatizar algunos puntos:En primer lugar, lo definido después de let no puede tener el mismo nombre que addSum. Esto es un gran problema y se informará de un error. En segundo lugar, es mejor deconstruirlo como lo hago a continuación. De lo contrario, cuando lo use, solo puede obtener un valor como en otros casos.

Finalmente, no olvide devolver la suma y agregar lo que recibimos.

posdata

Me tomó mucho tiempo resolver los problemas encontrados en este blog. Si tiene alguna pregunta, puede publicarla en el área de comentarios.

Bienvenido a prestar atención y esperamos traerle mejores artículos.