Función data() de Vue3

Vue3 选项式 APIAPI de Opciones de Vue3

En Vue3,data()la función data() es una de las funciones principales para definir el estado interno (datos) del componente.

data()La función devuelve un objeto; las propiedades de este objeto son los datos internos del componente, a los que se puede acceder y operar a través de la plantilla u otra lógica.

data()La función data() es una parte importante de cada componente de Vue; a través de ella se puede inicializar el estado de datos del componente.

Uso básico de la función data()

En Vue3,data()la función normalmente se define como una función y devuelve un objeto. Este objeto contiene los atributos de datos que el componente necesita.

Código de ejemplo

Ejemplo

export default {
  data() {
    return {
      message: 'Hello, Vue3!',
      count: 0
    };
  }
};

Explicación

  • data()La función devuelve un objeto que contiene dos propiedades:
    • message: un dato de tipo cadena, cuyo valor inicial es'Hello, Vue3!'。
    • count: un dato de tipo numérico, cuyo valor inicial es0。
  • Estos datos se pueden usar directamente en la plantilla o en los métodos del componente.

¿Por qué data() es una función?

En Vue3,data()data() debe ser una función y no devolver directamente un objeto. Esto se debe a que un componente de Vue puede reutilizarse varias veces; sidata()data() fuera un objeto, todas las instancias compartirían el mismo objeto de datos, lo que provocaría conflictos de datos.

Al definirdata()data() como función, cada vez que se crea una instancia del componente, Vue llama a esta función y devuelve un nuevo objeto de datos, asegurando así que los datos de cada instancia sean independientes.

Ejemplo

Ejemplo

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};
  • Cada vez que se crea una instancia del componente,data()se llama a la función data(), que devuelvemessagedatos completamente nuevos.

Características de la función data()

1. Datos reactivos

data()Las propiedades del objeto devuelto son convertidas por Vue en datos reactivos. Cuando estos datos cambian, Vue actualiza automáticamente las vistas que dependen de ellos.

2. Inicialización de datos

data()La función se llama al instanciar el componente y se utiliza para inicializar el estado de datos del componente.

3. Aislamiento de datos

Comodata()data() es una función, cada instancia del componente tiene su propio objeto de datos independiente, evitando así la compartición de datos y los conflictos.

Consideraciones sobre la función data()

1. No usar funciones flecha

data()La función data() no puede usar una función flecha, porque las funciones flecha no tienen su propiothiscontexto this, lo que impide acceder correctamente a la instancia del componente.

Ejemplo incorrecto：

Ejemplo

export default {
  data: () => ({
    message: 'Hello, Vue3!'
  })
};

Ejemplo correcto：

Ejemplo

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};

2. Evite modificar directamente las propiedades de la instancia de Vue

Endata()En la función data(), no modifique directamente las propiedades de la instancia de Vue (comothis.$datathis), sino que defina los datos devolviendo un objeto.

Práctica

Intente crear un componente de Vue y, en ladata()función data(), defina los siguientes datos:

  • username: el valor inicial es una cadena vacía''。
  • age: el valor inicial es0。
  • isStudent: el valor inicial esfalse。

Ejemplo

<template>
  <div>
    <h1>Información del usuario</h1>
    <p>Nombre de usuario: {{ username }}</p>
    <p>Edad: {{ age }}</p>
    <p>¿Es estudiante?: {{ isStudent ? 'sí' : 'no' }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
name: 'UserInfo', // Nombre del componente
  data() {
    return {
username: '', // El valor inicial es una cadena vacía
age: 0, // El valor inicial es 0
isStudent: false // El valor inicial es false
    };
  }
});
</script>

<style scoped>
/* Estilos opcionales */
h1 {
  color: #2c3e50;
}
p {
  font-size: 16px;
}
</style>

Vue3 选项式 APIAPI de Opciones de Vue3

Otras extensiones