En vue3, varias formas comunes de usar watch

Sin más preámbulos, ¡vamos directamente al código práctico!

Primero defina dos variables a, b

import { ref, watch } from 'vue'

const a = ref(0)
const b = ref(0)

1. Monitorear cada variable individualmente

watch(() => a.value, (newA, oldA) => {
  console.log(newA, oldA)
})
watch(() => b.value, (newB, oldB) => {
  console.log(newB, oldB)
})

2. Coloque varias variables en una matriz y combine el monitoreo

watch([a, b], ([newA, newB], [oldA, oldB]) => {
  console.log('newA, oldA:', newA, oldA)
  console.log('newB, oldB:', newB, oldB)
})

3. Coloque múltiples variables en una matriz y monitoree de manera integral

watch([a, b], (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, { immediate: true, deep: true })

Además, a través de la verificación descubrí que en vue3, si ocurre un bucle infinito, las variables monitoreadas por watch solo se monitorearán hasta 100 veces, evitando así problemas de desbordamiento de memoria/pila.

El contenido anterior es un resumen de mi experiencia de desarrollo. Cualquier similitud es pura coincidencia. Además, si hay algún error en el contenido, indíquelo en el área de comentarios, ¡gracias!