Estoy desarrollando una aplicación sencilla en Vue3 y TypeScript. scrap una interface e inicialicé una variable reactiva que quería ver:
interface Scrap { Text: string, ModificationDate: string, } const scrap = ref<Scrap>({ Text: '', ModificationDate: '' } as Scrap) watch(() => scrap, () => console.log('change')) scrap.Text se modifica en la interfaz de usuario de la aplicación y veo estos cambios en DevTools → Vue.
Sin embargo, la devolución de llamada watch() no se activa, a pesar de ese cambio. ¿Cuál es la razón para eso?
Probé tanto watch(scrap, () => console.log('change')) como watch(() => scrap, () => console.log('change')) pero no hubo diferencia en el comportamiento ( ni errores o advertencias).
En caso de que se observe todo el objeto, debe ser un observador profundo:
watch(scrap, () => console.log('change'), { deep: true })De lo contrario, se debe observar una propiedad específica:
watch(() => scrap.value.Text, () => console.log('change'))