Enlace de atributos
ofa.js admite la vinculación de datos a las propiedades de los objetos después de la instanciación de elementos, como el valor (value) o la propiedad checked de un elemento input.
Enlace de propiedad unidireccional
El enlace unidireccional de atributos utiliza la sintaxis :toKey="fromKey" para sincronizar "unidireccionalmente" los datos del componente al atributo del elemento DOM. Cuando los datos del componente cambian, el atributo del elemento se actualiza instantáneamente; sin embargo, los cambios propios del elemento (como la entrada del usuario) no se escriben de vuelta al componente, manteniendo el flujo de datos único y controlable.
Valor actual: {{val}}
Nota: modificar el contenido directamente en el campo no cambiará el valor mostrado arriba
Enlace bidireccional de propiedades
El enlace bidireccional de atributos utiliza la sintaxis sync:xxx, logrando la sincronización bidireccional entre los datos del componente y los elementos DOM. Cuando cambian los datos del componente, se actualizan los atributos del elemento DOM; cuando cambian los atributos del elemento DOM (como la entrada del usuario), también se actualizan automáticamente los datos del componente.
Valor actual: {{val}}
Sugerencia: modificar el contenido en el campo actualizará el valor mostrado arriba en tiempo real
Características del enlace bidireccional
- Flujo de datos: Componente ↔ Elemento DOM (bidireccional)
- Cambios en datos del componente → Actualización del elemento DOM
- Cambios en el elemento DOM → Actualización de datos del componente
- Aplicable en escenarios que requieren entrada del usuario y sincronización de datos
Escenarios comunes de enlace de datos bidireccional
Ejemplo de enlace bidireccional de formulario
Vista previa en tiempo real:
Texto: {{textInput}}
Número: {{numberInput}}
Texto multilínea: {{textareaInput}}
Selección: {{selectedOption}}
Estado de la casilla: {{isChecked ? 'Marcada' : 'No marcada'}}
Precauciones
- Consideraciones de rendimiento：El enlace bidireccional crea observadores de datos, y el uso excesivo puede afectar el rendimiento
- Consistencia de datos：El enlace bidireccional garantiza la consistencia entre datos y vista, pero hay que tener cuidado de evitar bucles infinitos de actualización
- Configuración de valores iniciales：Asegurar que los datos enlazados tengan valores iniciales apropiados, para evitar problemas de visualización de undefined
- Conflictos de eventos：Evitar usar simultáneamente enlace bidireccional y manejo manual de eventos en el mismo elemento, para evitar conflictos