CursosEmpresasBlogLiveConfPrecios

Problemática del declarative rendering en JavaScript

Clase 4 de 37 • Curso de Reactividad con Vue.js 3

Clase anteriorSiguiente clase
Resumen

Aprende a conectar información y presentación con JavaScript Vanilla de forma clara y práctica. Verás cómo iniciar un “Hola mundo”, enlazar data.message a elementos del DOM y detectar por qué este enfoque manual complica la reactividad cuando la interfaz crece, preparando el camino para Vue.js.

¿Qué problema resuelve el declarative rendering con JavaScript Vanilla?

El enfoque busca que la información (un objeto data) y la presentación (el HTML) se mantengan sincronizados sin esfuerzo. Aquí se demuestra el enlace manual: primero se llena un span con data.message, luego se agrega un input y se crea un evento para que los cambios del usuario actualicen tanto los datos como la vista.

  • Información y presentación: separar data y el HTML para mantener orden.
  • Selector del DOM: document.querySelector para ubicar elementos.
  • Actualización de contenido: innerText para reflejar el estado.
  • Evento de input: escuchar cambios del usuario y propagar al DOM.
  • Reactividad manual: repetir actualizaciones en cada elemento enlazado.

¿Qué extensiones usar en Visual Studio Code?

  • Extensión “Vue HTML”: resalta sintaxis de Vue en HTML.
  • Dependencia “Vetur”: soporte oficial del equipo de Vue para trabajar de forma más cómoda y profesional en Visual Studio Code.

¿Cómo crear el hola mundo y enlazar datos al DOM?

Primero se estructura un HTML simple con un contenedor, un span para mostrar el mensaje y un script con la lógica. La clave: llenar el span desde data.message.

¿Cómo estructurar index.html con data y presentación?

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hola mundo</title>
  </head>
  <body>
    <div>
      <span></span>
    </div>
    <script>
      const data = { message: 'Hola mundo' };
      const span = document.querySelector('span');
      span.innerText = data.message;
    </script>
  </body>
</html>

¿Cómo servir con npx http-server y validar el enlace?

  • Ejecutar en la terminal: npx http-server.
  • Abrir la dirección que muestra la terminal en el navegador.
  • Verificar que el span contiene el mensaje: “Hola mundo”.
  • Palabras clave: npx, npm, Node, http-server.

¿Cómo sincronizar un input y por qué escala mal sin Vue.js?

Para que el usuario modifique el mensaje, se agrega un input, se inicializa con data.message y se escucha el evento input. Cada cambio actualiza la información y luego la presentación.

¿Cómo conectar el input a data.message y actualizar el span?

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hola mundo</title>
  </head>
  <body>
    <div>
      <span></span>
      <input type="text">
    </div>
    <script>
      const data = { message: 'Hola mundo' };

      const span = document.querySelector('span');
      const input = document.querySelector('input');

      // Enlace inicial de información a presentación.
      span.innerText = data.message;
      input.value = data.message;

      // Reactividad manual: actualizar data y vista al escribir.
      input.addEventListener('input', (e) => {
        data.message = e.target.value;
        span.innerText = data.message;
      });
    </script>
  </body>
</html>

¿Qué limitaciones motivan usar Vue.js y su reactividad?

  • Duplicación de lógica: hay que actualizar cada elemento ligado al mismo dato.
  • Alto acoplamiento: la vista depende de múltiples selectores y operaciones manuales.
  • Escalabilidad limitada: añadir más span o más input complica el mantenimiento.
  • Reactividad frágil: cualquier olvido deja elementos desincronizados.
  • Solución prometida: Vue.js crea un enlace declarativo y una reactividad interna que automatiza estas actualizaciones.

¿Qué parte te gustaría profundizar o qué reto encontraste al enlazar data con el DOM? Escribe tus dudas o experiencias en los comentarios.