Vue3 renderizado declarativo
El renderizado declarativo (Declarative Rendering) se refiere a actualizar la vista mediante datos, en lugar de manipular el DOM directamente.
El renderizado declarativo permite a los desarrolladores centrarse más en la lógica de negocio, sin preocuparse por cómo actualizar la vista y el DOM.
El renderizado declarativo de Vue3 es un método de renderizado basado en plantillas que permite a los desarrolladores describir la estructura de la página y las relaciones de enlace de datos mediante una sintaxis de plantilla concisa, sin necesidad de manipular el DOM directamente.
El renderizado declarativo de Vue3 simplifica el proceso de actualización de la interfaz de usuario mediante el uso de plantillas, directivas (como v-if, v-for, v-bind, etc.) y datos reactivos.
El renderizado declarativo de Vue te permite simplemente declarar cómo debería presentarse la interfaz de usuario; Vue actualiza automáticamente la vista según los cambios en los datos. Cuando cambias los datos, la vista responde automáticamente.
Vue3 utiliza una sintaxis de plantilla (similar a HTML) para describir la interfaz de usuario. Las expresiones en la plantilla (como {{ message }}) se enlazan al modelo de datos del componente.
1. Enlace de datos
El enlace de datos es el núcleo del renderizado declarativo.
Al enlazar datos, Vue puede actualizar automáticamente el contenido de los elementos del DOM, evitando la manipulación manual tradicional del DOM.
Expresión de interpolación
La expresión de interpolación se realiza mediante dobles llaves{{ }}para insertar los datos del componente en la plantilla HTML.
Ejemplo
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3!'
};
}
};
</script>
En el ejemplo anterior, las llaves dobles{{ message }}se renderizan comoHello, Vue 3!, y cuando el valor de message cambia, la vista se actualiza automáticamente.
El contenido dentro de las llaves dobles no se limita solo a identificadores o rutas; podemos usar cualquier expresión válida de JavaScript.
<h1>{{ message.split('').reverse().join('') }}</h1>
Enlace de atributos
Mediantev-bindla directiva, puedes enlazar atributos HTML a los datos del componente, lo que permite que los atributos de los elementos del DOM (como href, class, src) se actualicen dinámicamente según el estado del componente.
Ejemplo
<div>
<a v-bind:href="url">Haz clic en mí</a>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://www.example.com'
};
}
};
</script>
En el ejemplo anterior, v-bind:href enlaza los datos de url al atributo href de la etiqueta <a>. Cuando url cambia, href se actualiza automáticamente.
Renderizado condicional
Vue implementa el renderizado condicional mediante las directivas v-if, v-else-if y v-else, determinando si se renderiza un elemento del DOM según una condición de datos.
Ejemplo
<div>
<p v-if="isVisible">Este texto es visible</p>
<button @click="toggleVisibility">Alternar visibilidad</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
};
</script>
En el ejemplo anterior, cuando isVisible es true, la etiqueta <p> se renderiza. Al hacer clic en el botón, isVisible se invierte y la visibilidad de la etiqueta <p> también cambia automáticamente.
Renderizado de listas
Con la directiva v-for se puede renderizar una lista.
Vue renderiza el elemento DOM correspondiente según cada elemento del array, y cuando los datos del array cambian, actualiza automáticamente la vista.
Ejemplo
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Vue 3' },
{ id: 2, name: 'JavaScript' },
{ id: 3, name: 'HTML' }
]
};
}
};
</script>
En el ejemplo anterior, v-for renderiza una lista según el array items. Cada elemento de la lista tiene una key para ayudar a Vue a rastrear cada elemento, mejorando así la eficiencia del renderizado.
Enlace de datos bidireccional
Vue proporciona la directiva v-model para implementar el enlace bidireccional entre elementos de formulario (como <input>) y los datos del componente. De esta manera, el valor del elemento de formulario se mantiene sincronizado con el modelo de datos: cuando el usuario introduce texto, los datos se actualizan automáticamente; cuando los datos cambian, la vista se actualiza automáticamente.
Ejemplo
<div>
<input v-model="message" placeholder=Introduce algún texto />
<p>Has introducido: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
</script>
En el ejemplo anterior, v-model mantiene sincronizado el valor del elemento input con los datos de message. Cuando el usuario escribe texto en el campo de entrada, message se actualiza automáticamente y el contenido de la etiqueta <p> también cambia automáticamente.
Manejo de eventos
Vue proporciona la directiva v-on para escuchar eventos del DOM y ejecutar métodos cuando se activan. Esto te permite manejar de forma declarativa eventos como la entrada del usuario o los clics.
Ejemplo
<div>
<button v-on:click="increment">Haz clic en mí</button>
<p>Contador de clics: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count += 1;
}
}
};
</script>
En el ejemplo anterior, v-on:click escucha el evento de clic del botón y llama al método increment en cada clic para aumentar el valor de count. count se actualiza automáticamente en la vista.
Propiedades computadas
Las propiedades computadas son una forma declarativa de calcular valores que ofrece Vue.
Las propiedades computadas se basan en datos reactivos y solo se recalculan cuando cambian los datos de los que dependen.
Ejemplo
<div>
<p>Monto original: {{ amount }}</p>
<p>Monto después de impuestos: {{ computedAmount }}</p>
</div>
</template>
<script>
export default {
data() {
return {
amount: 100
};
},
computed: {
computedAmount() {
return this.amount * 1.1; // supongamos que la tasa de impuestos es del 10%
}
}
};
</script>
computedAmount es una propiedad computada que calcula el monto después de impuestos a partir de amount. Cuando amount cambia, computedAmount se actualiza automáticamente, sin necesidad de activar manualmente la actualización de la vista.
Otras extensiones