vue3-clicko-informatica-programacion

Vue 3 es más rápido, más pequeño en tamaño de archivo y está equipado con una mejor compatibilidad con TypeScript. Algunas de las nuevas características que os traemos desde CLiCKO y que podemos implementar son estas:

· Composition API (ahora integrada)

· Varios elementos raíz (sintaxis de plantilla)

· Suspense

· Múltiples v-models

Composition API

La Composition API se lanzó como un complemento hace unos meses, por lo que no tiene ninguna novedad como tal, pero en Vue 3 ya no tenemos que instalarlo como un complemento. Ahora, está integrado en el paquete y se puede usar de inmediato sin ninguna configuración adicional.

Hay dos ventajas principales de utilizar la Composition API:

· Mejor organizacion

· Compartir / reutilizar el código

Vue 3 seguirá admitiendo la Options API, por lo que si crees que no necesitas la Composition API, siempre puedes utilizar los métodos de Vue 2.

Si es nuevo en la Composition API, en este link puedes ver como utilizarla: https://composition-api.vuejs.org/

Varios elementos raíz

En Vue 2, la etiqueta de plantilla solo podía tener un elemento raíz. Incluso si solo tuviéramos dos <p> etiquetas, teníamos que introducirlas dentro de un <div> para que funcione. Debido a esto, también teníamos que cambiar el código CSS en el componente principal para que se viera como se esperaba.

En Vue 3, esta restricción se elimina. Ya no hay necesidad de un elemento raíz.

Podemos usar cualquier número de etiquetas directamente dentro de la <template></template>.

Suspense

Suspense es una nueva característica que renderiza un componente de respaldo hasta que el componente principal obtiene los datos.

A veces usamos operaciones asincrónicas para obtener datos del servidor. En lugar de mostrar la plantilla con v-if y luego volver a cambiarla cuando devolvemos los datos, Suspense lo hace por nosotros.

Suspense se puede utilizar para ambas partes de la plantilla o para toda la plantilla:

<template>
    <Suspense>
        <template #default>
            <div v-for="item in articleList" :key="item.id">
                <article>
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.body }}</p>
                </article>
            </div>
        </template>
        <template #fallback>
            Articles loading...
        </template>
    </Suspense>
</template>
<script>

import axios from 'axios'

export default {
    async setup() {
        let articleList = await axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                console.log(response)
                return response.data
            })
            return {
                articleList
            }
    }
}
</script>

Múltiples v-models

En Vue-3, podemos vincular cualquier número de v-models a nuestros componentes:

<template>
    <survey-form v-model:name="name" v-model:age="age"> </survey-form>
</template>

En definitiva, esta nueva versión de Vue nos trae muchas novedades muy interesantes que nos ayudaran en nuestro día a día como desarrollador.

Twitter
Visit Us
Follow Me
LinkedIn
Share