Scribd
Cargar
675 vistas2 páginas

Escuela Vue Vue 3 Chuleta

Vue 3 introduce nuevas características como fragmentos, teleport, suspense, Composition API y nuevos hooks de ciclo de vida. La Composition API permite una organización más modular de los componentes separando la lógica en funciones. Los fragmentos permiten usar múltiples elementos como raíz de un componente y teleport renderiza un componente en un lugar diferente del DOM.

Cargado por

eulemis
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
675 vistas2 páginas

Escuela Vue Vue 3 Chuleta

Vue 3 introduce nuevas características como fragmentos, teleport, suspense, Composition API y nuevos hooks de ciclo de vida. La Composition API permite una organización más modular de los componentes separando la lógica en funciones. Los fragmentos permiten usar múltiples elementos como raíz de un componente y teleport renderiza un componente en un lugar diferente del DOM.

Cargado por

eulemis
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 2

Vue 3: la chuleta 🥩

Nuevas características
Instalación e uso Vue 3 está cargado de novedades que querrás
La manera mas sencilla de comenzar a utilizar desde el primer momento. Aquí tienes
utilizar Vue 3 es a través de Vue CLI. algunos de los más importantes.
Asegúrate de tenerlo actualizado.
npm install -g @vue/cli
Varios v-model
# O
npm update -g @vue/cli Vue 3 permite usar argumentos en la directiva
v-model, facilitando el uso de múltiples v-model
Luego, solo tienes que crear un proyecto en componentes, cada uno asociado una
con él y seleccionar Vue 3 en las propiedad reactiva.
opciones (también instalará las nuevas  <PersonalForm
versiones de Vue Router, Vuex y demás). v-model:name="name"
v-model:age="age"
vue create mi-super-proyecto v-model:color="color"
/>

Cada modelo se sincronizará con una propiedad


Fragmentos diferente en el componente.
Por fin 🔥
podemos utilizar varios elementos del  import { ref } from 'vue'
DOM como raíz de componentes gracias a los ...
setup() {
Fragmentos de Vue 3. const name = ref("John Doe");
const age = ref(33);
 <!--Mi Componente -->
const color = ref("#FF0000");
return {
<template>
name, age, color
<div>...</div>
<div> 🙀
</div>
}
}
</template>

Teleport Nuevos lifecycle hooks


Con los teleport de Vue 3 puedes definir la Vue 3 trae nuevos nuevos hooks en el ciclo de
lógica en un sitio pero presentarlo en otro lugar vida de la instancia Vue, especialmente
del DOM, aunque físicamente ambas partes pensados para trabajar con la Composition API.
estén en el mismo documento.  import { onUpdated } from 'vue'
const MiComponente = {
 <!--Mi Modal --> setup() {
<teleport to="body"> onUpdated(() => {
<div class="modal"> console.log('Updated!')
... })
</div> }
</teleport> }

Suspense Provide & Inject


Con suspense de Vue 3 podemos mostrar  Para evitar escenarios donde las propiedades se
diferentes contenidos en un componente pasan entre diferentes generaciones de
(fallback), una vez todas las promesas (async) componentes, Vue 3 permite proveer datos que
involucradas se hayan resuelto. pueden ser recuperados por los hijos.
 <!-- Mi Componente -->   // Padre // Nieto
<Suspense> export default { export default {
<template #default> provide: { inject:
<HelloWorld /> location: 'North Pole', [
</template> geolocation: { 'location',
<template #fallback> longitude: 90, 'geolocation'
<p>Loading...</p> latitude: 135 ]
</template> } }
</Suspense> }
}

Aprende JavaScript, Vue, Vuex, Firebase, Webpack y mucho más en escuelavue.es


Vue 3: la chuleta 🥩
Composition API
La nueva Composition API (compatible con la actual Options API) ha llegado para ayudarnos en la
organización de componentes extensos y/o que necesiten ser estructurados con base en sus
características y funcionalidades.

<template>
<h1>Tienes {{ tareasPendientes }} tareas pendientes </h1> 😔
<input type="text" v-model="nuevaTarea" required />
<input type="button" @click="agregarTarea" />
<hr />
<ul>
<li v-for="(tarea, $index) in tareas" :key="$index">
{{ tarea.titulo }}
Importamos los objetos y métodos de la API de
</li>
</ul> Composición
</template>
Las referencias reactivas envuelven valores primitivos en
<script> objetos que reaccionan ante cambios
import { ref, computed } from 'vue'
export default {
setup() {
const nuevaTarea = ref('')
const tareas = ref([
{ titulo: 'Aprender Vue', finalizada: true }, A través de computed creamos
{ titulo: 'Aprender Vuex', finalizada: true }, propiedades computadas
{ titulo: 'Aprender Firebase', finalizada: false }
])
Exportamos las funciones que
const tareasPendientes = computed(() => {
return tareas.value.filter((tarea) => !tarea.finalizada) hacen de métodos en el
}) componente
function agregarTarea() {
tareas.value.push({ titulo: nuevaTarea.value, finalizada: false })
nuevaTarea.value = ''
}
return { nuevaTarea, tareas, tareasPendientes, agregarTarea }
}
Para acceder al valor primitivo debemos
}
utilizar la propiedad value
</script>

Hacemos accesibles las propiedades y métodos


exponiéndolos al exportarlos

El método setup() Propiedades ¿Y el resto?


El método setup() de Vue 3 es Podemos acceder a las Podemos acceder a lo antes
llamado antes de la propiedades de un accedíamos con this a través
inicialización del componente componente como primer del objeto context.
(created hook) y no tiene parámetro de setup().  
acceso a this.   export default {
export default { setup(props, context) {
  props: ['cantidad'], context.attrs
export default { context.slots
setup(props) {
setup() { context.emit
console.log(props.cantidad)
... }
}
return { ... } }
}
}
}

Aprende JavaScript, Vue, Vuex, Firebase, Webpack y mucho más en escuelavue.es

También podría gustarte