Atributo methods de Vue3

Vue3 选项式 APIAPI de opciones de Vue3

En Vue3,methodsEl atributo es un objeto que se utiliza para definir los métodos disponibles en el componente. Estos métodos pueden ser llamados en la plantilla del componente mediante el enlace de eventos u otros medios.

methodsEl atributo se utiliza generalmente para manejar la interacción del usuario, ejecutar ciertas operaciones lógicas o activar el comportamiento del componente.

Sintaxis básica para usar el atributo methods

En el componente Vue3,methodsEl atributo generalmente se definesetupfuera de la función. Contiene un objeto, donde cada par clave-valor representa un método: la clave es el nombre del método y el valor es la implementación de dicho método.

Ejemplo

export default {
  methods: {
    methodName() {
      // Lógica del método
    },
    anotherMethod() {
      // Lógica de otro método
    }
  }
}

Ejemplo: Activar un método al hacer clic en un botón

A continuación se muestra un ejemplo sencillo que demuestra cómo usar, en Vue3,methodsel atributo para manejar el evento de clic del botón.

Ejemplo

<template>
  <div>
    <button @click="handleClick">Haz clic en mí</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
message: '¡Hola, Vue3!'
    };
  },
  methods: {
    handleClick() {
this.message = '¡El botón ha sido pulsado!';
    }
  }
};
</script>

Análisis del código

  1. Parte de la plantilla：

    • Se utiliza@clickel enlace de eventos para asociarhandleClickel método con el evento de clic del botón.
    • Cuando el usuario hace clic en el botón,handleClickel método será invocado.

  2. Parte del script：

    • dataLa función devuelve un objeto que contienemessageel atributo, que se utiliza para almacenar el mensaje mostrado.
    • methodsEn el objeto se definehandleClickel método, que modificamessageel valor del mensaje mostrado.

Función del atributo methods

  1. Manejar la interacción del usuario：

    • methodsEl atributo se usa comúnmente para responder a operaciones interactivas como clics, entradas de usuario, etc.

  2. Ejecutar operaciones lógicas：

    • Se puede escribir código lógico complejo en los métodos, como cálculo de datos, evaluaciones condicionales, etc.

  3. Activar el comportamiento del componente：

    • Mediante llamadas de método, se pueden activar comportamientos como la actualización del estado del componente, solicitudes de datos, etc.

Diferencia entre methods y computed

  • methods：

    • El código dentro del cuerpo del método se ejecuta cada vez que se llama.
    • Es adecuado para manejo de eventos u operaciones que requieren activación manual.

  • computed：

    • Solo se recalcula cuando cambian los datos de los que depende.
    • Es adecuado para escenarios donde se necesita calcular resultados dinámicamente según los datos.

Práctica

  1. Intentamethodsañadir un nuevo método para limpiarmessageel contenido.
  2. Modifica el código de ejemplo para que, al hacer clic en el botón, se muestre la hora actual.

Vue3 选项式 APIAPI de opciones de Vue3

Otras extensiones