Propiedades Computed de Vue3

Vue3 选项式 APIAPI de Opciones de Vue3

ComputedLas propiedades Computed son el método en Vue.js para declarar propiedades calculadas que dependen de otros datos.

ComputedTe permiten encapsular la lógica compleja en una propiedad y usarla en la plantilla como si fuera un dato normal.

ComputedEl valor de la propiedad se actualiza automáticamente según los datos de los que depende; por lo tanto, cuando los datos cambian,computedla propiedad también se recalcula automáticamente.

¿Por qué usar propiedades Computed?

  1. Simplificar la lógica de las plantillas
    En Vue, escribir lógica compleja directamente en las plantillas puede hacer que el código sea difícil de mantener. A través de lascomputedpropiedades Computed, puedes sacar la lógica compleja de las plantillas y hacer que el código sea más claro.

  2. Optimización del rendimiento
    ComputedLas propiedades Computed se almacenan en caché en función de los datos de los que dependen. Solo cuando los datos dependientes cambian,computedla propiedad se recalcula. Este mecanismo evita cálculos innecesarios y mejora el rendimiento.

  3. Actualización reactiva
    El sistema reactivo de Vue rastrea automáticamente lascomputeddependencias de la propiedad y recalcula el valor cuando estas cambian, lo que garantiza que los datos se mantengan siempre actualizados.

¿Cómo usar propiedades Computed?

En Vue3,computedlas propiedades se pueden definir mediante lacomputedfunción. A continuación se muestra un ejemplo sencillo:

Ejemplo

import { ref, computed } from 'vue';

export default {
  setup() {
    // definir un dato reactivo
    const firstName = ref('John');
    const lastName = ref('Doe');

    // definir una propiedad computed
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};

Análisis del código

  1. refLa función
    se utiliza para crear datos reactivos.firstNameylastNameEs una variable reactiva.
  2. computedLa función
    se utiliza para definir propiedades calculadas.fullNameEs unacomputedpropiedad Computed que depende defirstNameylastName。
  3. Uso en la plantilla
    En la plantilla, puedes usar directamentefullName, que se actualizará automáticamente según elfirstNameylastNamevalor de.

Mecanismo de caché de las propiedades Computed

ComputedEl valor de la propiedad se almacena en caché y solo se recalcula cuando cambian los datos de los que depende. Por ejemplo:

Ejemplo

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // genera 0
count.value = 2;
console.log(doubleCount.value); // genera 4

En este ejemplo,doubleCountel valor de solo se recalcula cuandocountcambian los datos de los que depende.

Propiedades Computed vs Methods

ComputedLas propiedades Computed y losmethodsmethods se pueden usar para encapsular lógica, pero tienen las siguientes diferencias:

  1. Caché
    ComputedLas propiedades Computed cachean el resultado, mientras quemethodslos methods se vuelven a ejecutar en cada llamada.
  2. Rendimiento
    Si la lógica es compleja y requiere llamadas frecuentes, el uso decomputedpropiedades Computed puede mejorar el rendimiento.
  3. Casos de uso
    ComputedLas propiedades Computed son adecuadas para valores calculados que dependen de otros datos, mientras quemethodslos methods son adecuados para ejecutar operaciones o manejar eventos.

Ejemplo comparativo:

Ejemplo

const count = ref(0);

// usar propiedad computed
const doubleCount = computed(() => count.value * 2);

// usar methods
function getDoubleCount() {
  return count.value * 2;
}

Vue3 选项式 APIAPI de Opciones de Vue3

Otras extensiones