Propiedad watch de Vue3

Vue3 选项式 APIVue3 API de opciones

En Vue3,watchla propiedad se utiliza para observar los cambios de un dato en la instancia de Vue y ejecutar la función de devolución de llamada correspondiente cuando el dato cambia.

watchNos permite observar y reaccionar a los cambios de datos específicos en la instancia de Vue, ejecutando así algunas operaciones secundarias, como actualizar el DOM, realizar solicitudes de red, etc.

2. Uso básico de la propiedad watch

En Vue3,watchla propiedad se puede utilizar de las siguientes maneras:

Ejemplo

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count de ${oldValue}a ${newValue}`);
    });

    return {
      count
    };
  }
};

3. Explicación del código

En el código anterior:

  • Primero, utilizamosrefcreamos un dato reactivocount, y establecimos su valor inicial en 0.
  • Luego, utilizamoswatchla función para observarcountlos cambios de.watchacepta dos parámetros:
    • El primer parámetro es el dato que queremos observar (aquí escount）。
    • El segundo parámetro es una función de devolución de llamada, que se activa cuando el dato observado cambia. La función de devolución de llamada recibe dos parámetros:
      • newValue: el nuevo valor después del cambio del dato.
      • oldValue: el valor anterior al cambio del dato.

4. Uso avanzado de la propiedad watch

Además de observar un solo dato,watchtambién se pueden observar varios datos, o una expresión compleja.

4.1 Observar varios datos

Ejemplo

import { ref, watch } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
      console.log(`firstName de ${oldFirstName}a ${newFirstName}`);
      console.log(`lastName de ${oldLastName}a ${newLastName}`);
    });

    return {
      firstName,
      lastName
    };
  }
};

En este ejemplo, observamosfirstNameylastNamelos cambios de dos datos. Cuando cualquiera de ellos cambie, se activará la función de devolución de llamada.

4.2 Observar expresiones complejas

Ejemplo

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Alice',
      age: 25
    });

    watch(
      () => user.value.age, // Observar los cambios de user.age
      (newAge, oldAge) => {
        console.log(`age de ${oldAge}a ${newAge}`);
      }
    );

    return {
      user
    };
  }
};

En este ejemplo, mediante una función observamosuser.agesus cambios. Esta forma es adecuada para observar una propiedad específica de un objeto.

5. Opciones de la propiedad watch

watchLa función también acepta un tercer parámetro, que es un objeto de configuración opcional, que se puede utilizar para personalizar el comportamiento de observación.

Ejemplo

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count de ${oldValue}a ${newValue}`);
    }, {
      immediate: true, // Ejecutar inmediatamente la función de devolución de llamada
      deep: true // Observación profunda, adecuada para observar objetos o arrays
    });

    return {
      count
    };
  }
};
  • immediate: true: indica que la función de devolución de llamada se ejecuta inmediatamente al comenzar la observación, en lugar de esperar a que el dato cambie.
  • deep: true: indica observación profunda, adecuada para observar cambios en objetos o arrays.

Vue3 选项式 APIVue3 API de opciones

Otras extensiones