En la API combinada de Vue 3, puede utilizar la función de vigilancia para monitorear los cambios de datos en los accesorios.
El primer parámetro de la función de vigilancia puede ser una función o una fuente de datos receptiva, como referencia, reactiva, etc.
Utilice una función como primer parámetro:
Si el primer argumento es una función, entonces se llamará a la función cada vez que cambie la dependencia y devolverá el valor a escuchar. De esta manera, cuando las dependencias cambien, la función de vigilancia se volverá a ejecutar automáticamente.
<script>
import {
watch, ref } from 'vue';
export default {
props: {
propValue: {
type: String,
required: true
}
},
setup(props) {
const propValue = ref(props.propValue);
watch(() => propValue.value, (newValue, oldValue) => {
console.log('Props Value changed:', newValue);
});
return {
propValue
};
}
};
</script>
Utilice una fuente de datos reactiva como primer parámetro:
Si el primer parámetro es una fuente de datos reactiva, entonces la función de vigilancia monitoreará directamente los cambios en la fuente de datos y ejecutará la función de devolución de llamada cada vez que cambie.
<script>
import {
watch, ref } from 'vue';
export default {
props: {
propValue: {
type: String,
required: true
}
},
setup(props) {
const propValue = ref(props.propValue);
watch(propValue, (newValue, oldValue) => {
console.log('Props Value changed:', newValue);
});
return {
propValue
};
}
};
</script>
La diferencia entre los dos métodos:
- funcionar como primer argumento:
- La función se llama cada vez que cambia la dependencia y devuelve el valor a escuchar.
- Cuando las dependencias cambian, la función de vigilancia vuelve a ejecutar automáticamente la función y compara el valor devuelto con el valor anterior para determinar si se debe ejecutar la función de devolución de llamada.
- Es adecuado para devolver el valor a monitorear después del cálculo o la lógica de procesamiento, como obtener los datos que deben monitorearse a través de propiedades calculadas u otras funciones.
- Fuente de datos reactiva como primer parámetro:
- Supervise directamente los cambios en las fuentes de datos reactivas sin tener que obtener manualmente el valor a monitorear en la función de devolución de llamada.
- Cuando la fuente de datos reactiva cambia, la función de vigilancia ejecutará directamente la función de devolución de llamada.
- Adecuado para monitorear directamente cambios en fuentes de datos receptivas, como ref, reactivas, etc.