Oyente
El observador (Watcher) es una función en ofa.js que se utiliza para detectar cambios en los datos y ejecutar la lógica correspondiente. Cuando los datos reactivos cambian, el observador activa automáticamente la función de devolución de llamada, permitiéndote realizar tareas como transformación de datos, operaciones secundarias o procesamiento asíncrono.
Uso básico
Los observadores se definen en el objeto watch del componente, donde el nombre de la clave corresponde al nombre de la propiedad de datos que se debe observar, y el valor es la función de devolución de llamada que se ejecuta cuando los datos cambian.
count:{{count}}
doubleCount:{{doubleCount}}
Parámetros de función callback
La función de callback del listener recibe dos parámetros:- newValue：el nuevo valor después del cambio
{watchers}：todos los objetos observadores del componente actual
Después de los cambios de datos, se realizará primero el procesamiento de antirrebote (debounce) y luego se ejecutarán las devoluciones de llamada en watch; el parámetro watchers es el conjunto de todos los cambios fusionados dentro de este ciclo de antirrebote.
La función en watch se llama inmediatamente después de que se complete la inicialización del componente, para establecer la supervisión de datos. Se puede distinguir si es la primera llamada verificando si watchers tiene longitud.
Nombre: {{name}}
Edad: {{age}}
{{log}}
Observación profunda
Para datos anidados de tipo objeto o array, watch realizará automáticamente una escucha profunda.
Información del usuario:
Nombre: {{user.name}}
Edad: {{user.age}}
Aficiones: {{user.hobbies.join(', ')}}
Escuchar múltiples fuentes de datos
Puedes escuchar simultáneamente los cambios en varios datos y, en la función de devolución de llamada, ejecutar la lógica correspondiente según los cambios en esos datos.
Ancho: {{rectWidth}}
Alto: {{rectHeight}}
Área: {{area}}
Escenarios de aplicación práctica
1. Validación de formularios
{{usernameError}}
{{emailError}}
2. Configurar el tema
Configuración: {{settings.theme}}
Estado de guardado: {{saveStatus}}
Precauciones
- Evitar modificar los datos observados: Modificar los datos que se están observando dentro de la función de callback de un observador puede provocar un bucle infinito. Si necesita modificarlos, asegúrese de tener una condición adecuada.
- Se puede usar una propiedad computada en su lugar: Si necesita calcular un nuevo valor basado en cambios de múltiples datos, se recomienda usar una propiedad computada en lugar de un observador.