Finalmente, llegamos a la parte API combinada de Vue 3. Aquí está la buena noticia: la API combinada de Vue 3 no solo hace que nuestro código sea más conciso, sino también más fácil de mantener. Hoy, hablemos del atributo de vigilancia, que es un artefacto que puede monitorear los cambios de datos en una instancia de Vue.
Primero, debemos entender cuál es el atributo de vigilancia. En pocas palabras, un reloj es como una cámara de vigilancia que observa los cambios en sus datos y realiza las operaciones correspondientes cuando los datos cambian. En Vue 3, usamos el atributo watch para escuchar cambios en los datos reactivos y luego ejecutar nuestra propia lógica.
Entonces, ¿cómo utilizamos el atributo de reloj? En realidad, es muy simple: solo necesitamos definir un objeto de vigilancia en la instancia de Vue y luego usar los datos a monitorear como clave y la función de devolución de llamada que se ejecutará como valor. Cuando los datos cambian, nuestra función de devolución de llamada se activa automáticamente.
El siguiente es un ejemplo sencillo que muestra cómo utilizar el atributo de vigilancia para monitorear cambios en un dato:
import {
ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`Count changed from ${
oldVal} to ${
newVal}`);
});
count.value++; // 输出：Count changed from 0 to 1
En este ejemplo, creamos datos reactivos llamados recuento y usamos el atributo de vigilancia para escuchar sus cambios. Cuando el valor del recuento cambia, nuestra función de devolución de llamada se activará e imprimirá la información de que el valor del recuento cambia del valor anterior al nuevo valor.
Por supuesto, el atributo de vigilancia no solo puede monitorear cambios en datos individuales, sino también monitorear cambios en objetos y matrices. Si desea escuchar los cambios en un objeto, puede pasar la función del objeto de vigilancia como valor, como se muestra a continuación:
import {
ref, watch } from 'vue';
const user = ref({
name: 'John', age: 30 });
watch(user, (newVal, oldVal) => {
console.log(`User changed from ${
JSON.stringify(oldVal)} to ${
JSON.stringify(newVal)}`);
});
user.value.name = 'Bob'; // 输出：User changed from {"name":"John","age":30} to {"name":"Bob","age":30}
En este ejemplo, creamos un objeto reactivo llamado usuario y usamos la propiedad de vigilancia para escuchar sus cambios. Cuando los atributos del usuario cambian, nuestra función de devolución de llamada se activará e imprimirá la información de que el valor del usuario cambia del valor anterior al nuevo valor.
Cabe señalar que cuando se utiliza el atributo de vigilancia para monitorear los cambios de datos, la ejecución de la función de devolución de llamada es asincrónica. Si necesita realizar alguna operación inmediatamente después de que cambien los datos, puede usar el atributo inmediato para que la función de devolución de llamada se ejecute inmediatamente cuando cambien los datos:
import {
ref, watch, immediate } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`Count changed from ${
oldVal} to ${
newVal}`);
immediate(() => {
console.log(`Count is now ${
newVal}`);
});
});
count.value++; // 输出：
Por supuesto, el atributo de vigilancia no es omnipotente. Su desventaja es que cada vez que los datos cambian, se activará la función de devolución de llamada. Si los datos cambian con frecuencia, puede causar problemas de rendimiento. Por lo tanto, en el desarrollo real, debemos optar por utilizar el atributo de reloj u otras soluciones con mejor rendimiento, como utilizar el atributo calculado o la tecnología de memorización, según la situación específica.
El código anterior muestra cómo usar el atributo de vigilancia en la API compuesta de Vue 3 para monitorear los cambios de datos. A través del atributo de vigilancia, podemos monitorear cambios en datos, objetos o matrices individuales y ejecutar la función de devolución de llamada correspondiente cuando los datos cambian. La ejecución de la función de devolución de llamada es asincrónica, pero puede usar el atributo inmediato para que se ejecute inmediatamente cuando cambian los datos. Cabe señalar que la sobrecarga de rendimiento del atributo de vigilancia es relativamente alta, por lo que en el desarrollo real es necesario elegir una solución adecuada según la situación específica.
En resumen, el atributo de vigilancia es una característica muy útil en Vue 3. Puede ayudarnos a monitorear los cambios de datos de manera más conveniente y realizar las operaciones correspondientes cuando los datos cambian. ¡Espero que todos los novatos puedan estudiarlo detenidamente y usarlo de manera flexible!