VUE

Componentes y Composition API

Tabla de contenido

Introducción a Vue CLI
Estructura del proyecto
Componentes dinámicos
Componentes asíncronos
Transiciones
Teleports
Ciclo de vida de los componentes
Introducción a Composition API
Variables reactivas con ref y reactive
Watch
Computed
Props
Provide / Inject
Template refs
Script setup

Introducción a Vue CLI

https://cli.vuejs.org/guide/installation.html

Instalar el CLI e inicializar proyecto con Vite

npm init vue@latest

Pasarnos a la carpeta del proyecto creado

cd project_name

Installamos npm

npm install

Inicializar el servidor

npm run dev

===

Instalar el CLI e inicializar proyecto con esta

npm install -g @vue/cli

Creamos el proyecto y le asignamos un nombre

vue create project_name

Pasarnos a la carpeta del proyecto creado

cd project_name

Inicializar el servidor

npm run serve

Con vue ui se puede generar una interfaz para administrar todas las opciones del proyecto. Pero si se instalo con vite no funciona.

Estructura del proyecto

package.json → Tiene nuestras dependencias, nuestros scripts que correremos con npm, nos prepara el terreno para poder trabajar.
README.md → Podemos ver los distintos comandos para poder instalar dependencias, ejecutar el servidor de desarrollo, compilar para producción, eslinter, documentación oficial.
babel.config.js → Configuración de babel. Es pequeño debido a que el equipo de desarrollo detrás de este proyecto ya se encargó de generar un preset de babel js, que ya lo tiene instalado nuestro proyecto.
.gitignore → Ignorar archivos para no subirlos al repositorio.
.eslintrc.js → Archivo para configurar eslint, este archivo agrega dos reglas, cuando se tenga activado el modo productivo se va a pedir que no se tengan console.log() y que no hayan debugger.
.browserslistrc → Le indicamos con que versiones de navegadores debe trabajar.
node_modules → En esta carpeta van a estar todos los módulos y dependencias que tiene nuestro proyecto.
public/ → Esta carpeta contiene un favicon.ico y un index.html, corre en un servidor de archivos estáticos.
src/ → La carpeta más importante, vamos a colocar todos los archivos en los que de verdad vamos a estar trabajando durante el desarrollo del proyecto. El archivo main.js es el archivo que va a encontrar el proyecto de webpack y lo va a utilizar para inicializar todo lo que tiene que ver con JavaScript en nuestro proyecto.
src/App.vue → Componente principal, es en el que se creará la App en main.js.
src/assets → Contendrá archivos estáticos, la diferencia entre src/assets y public/ es que assets se va a empaquetar junto con los archivos del proyecto, es decir, se va adjuntar todo el código javascript, css y html que se genere y también se van a incluir estos archivos estáticos en la carpeta dist (Creada con npm run build), lo que pasa con public es que esto no pasa a la carpeta dist, sin embargo, quedaría más del lado del servido, mientras que assets queda del lado del cliente.
src/components → Esta carpeta contendrá todos los componentes hechos en Vue.js que utilizaremos en nuestro proyecto. Esta carpeta se puede estructurar como sea, se pueden tener subcarpetas, por ejemplo.

Componentes dinámicos

Vue nos ofrece la posibilidad de generar componente dinamicos usando tag de vue <component>

ha este tag le defininimos la directriz v-bind para hacerlo reactivo, para complementar el v-bind se usa la palabra reservada de vue is, este va tomar el valor del componente(nombre del componente definido en la propiedad components del componente(que lo contiene) y no el nombre con el que lo estamos importando.), osea que dependiendo del valor de is se muestra cierto componente u otro.

 component :is="componente" />

Para que los estilos solo afecte al componente de interes y no de manera global a los otros componentes añadimos en el tag style la palabra reservada scoped

<style scoped>
    css
</style>

Componentes asíncronos

Son aquellos componentes que quiero que carguen despues de que carguen los componentes principales e importantes de mi aplicacion. Para poder hacer esto debo importar de vue la propiedad defineAsyncComponent, antes del export default.

import {defineAsyncComponent} from "vue";

const HelloWorld = defineAsyncComponent(()=> import("./components/HelloWorld.vue"))

Ventajas

Que los proyectos carguen mucho más rapido
Que los proyectos solo carguen los componbentes que van a necesitar

Transiciones

https://vuejs.org/guide/built-ins/transition.html

Permite aplicar css al momento de determinar si un elemento aparece o desaparece en pantalla.

Por ejemplo: Utilizamos la transición para agregar un desvanecimiento al clickear el botón que muestra (U oculta) el menú.

<script>
import Menu from "./components/vMenu.vue";

export default {
  name: "App",
  components: { Menu },
  data() {
    return {
      show: false,
    };
  },
};
</script>

<template>
    <button @click="show = !show">Menu</button>
    <transition name="fade">
      <Menu v-show="show" />
    </transition>
</template>

<style >
.fade-enter-from,
.fade-leave-to{
  opacity:0;
}
.fade-enter-active,
.fade-leave-active{
  transition: opacity 0.3s ease;
}
</style>

Los modificadores que tiene una trancisión es:

from: cuando se inicia la transición

to: cuando se termina la transición

active: cuando se está ejecutando la transición

Para que funcione la transición, se debe agregar la clase .fade-enter-active o .fade-leave-active a los elementos que se quieren animar.

fade-enter-active: cuando se inicia la transición

fade-leave-active: cuando se termina la transición

Teleports

Componente que nos proporciona vue, que me permite inyectar secciones de componentes (templates) en otros elementos del DOM como el body. sintaxis <teleport> este debe envolver la seccion que quiero inyectar en algun elemento del DOM.

<template>
  <div>
    <button @click="toggle">Modal</button>
    
    <teleport to="body">
        <div v-show="show" class="modal">
            <div class="modal-content">
                <p>Some text in the Modal..</p>
                <button @click="toggle" class="close">
                Cerrar
                </button>
            </div>
        </div>
    </teleport>
  </div>
</template>

Ciclo de vida de los componentes

https://vuejs.org/api/options-lifecycle.html

Ciclo de vida de los componentes, también conocidos como lifecycle hooks son funciones que nos permiten definir acciones en cada etapa del ciclo de los componentes

beforeCreate.
created.
beforeMount.
mounted.
beforeUpdate.
updated.
beforeUnmount.
unmounted.

beforeCreate Se llama cuando la instancia se inicializa, después de que las props se resuelven y antes de procesar opciones como data() o computed

beforeCreate(){
  //código a ejecutar
}

created se llama cuando la instancia ha terminado de procesar todas las opciones relacionados con el estado, como lo son: datos reactivos, propiedades computadas, métodos y observadores, pero aún no comienza la fase de montado y la función $el aún no esta disponible.

created(){
  //lógica a ejecutar
}

beforeMount se llama cuando el componente ha sido montado, pero no existen nodos en el DOM aún, pero están a punto de ser ejecutado el render el DOM por primera vez, no se llama su usamos renderizado del lado de servidor.

beforeMount(){
  //lógica a ejecutar
}

mounted se llama cuando el componente ha sido montado, se considera montado cuando: todos sus componentes hijos síncronos han sido montados, no se incluyen los asíncronos o los que estén en modo suspendido <Suspense> , cuando su propio árbol del DOM ha sido creado e insertado en su contenedor padre. Tampoco es llamado durante renderizado del lado del servidor

mounted(){
  //lógica a ejecutar
}

beforeUpdate se llama justo cuando el componente esta por actualizar su árbol del DOM, debido a un cambio reactivo. Este hook se puede usar para acceder al DOM justo cuando Vue esta por hacer un cambio.

beforeUpdate(){
  //lógica a ejecutar
}

updated se llama justo cuando el componente ha sido actualizado por un cambio en su estado, En caso del padre su método se llamará cuando los métodos de sus hijos hayan terminado. Es importante tener cuidado si no somos precavidos podemos provocar ciclos de renderizado infinito.

updated(){
  //lógica a ejecutar
}

beforeUnmount se llama justo cuando la instancia esta por salir del DOM, cuando usamos este hook la instancia que esta por salir aun es funcional

beforeUnmount(){
  //lógica a ejecutar
}

unmounted se llama cuando el componente es desmontado, un componente se considera desmontado cuando: todos su hijos han sido desmontados y todos sus efectos reactivos se han detenido, este hook se utiliza cuando queremos limpiar de manera manual algunos efectos como cuentas regresivas, conexiones con el server o eventos del DOM.

unmounted(){
  //lógica a ejecutar
}

Todas se colocan dentro del objeto de configuración de la option API como una opción más.

export default {
  name: "App",
  data() {
    return {
      text: 'Hello vue!',
    };
  },
  beforeCreate(){
    //código a ejecutar
  },
  created(){
    //código a ejecutar
  },
  mounted(){
    //código a ejecutar
  },
};

Introducción a Composition API

Se utiliza un método setup para declarar en su interior todos sus componentes con funciones.

<template>
  <div>Hola</div>
</template>

<script>
    import { onMounted } from "vue";
    export default {
        setup() {
            onMounted(() => {
                console.log("mounted!");
            });
        },
    };
</script>

Variables reactivas con ref y reactive

ref permite crear una referencia reactiva a un dato o una variable

<script>
    import { ref } from "vue";
    
    export default {
        setup() {
            const text = ref("text");

            return { 
              text,
            }
        },
    };
</script>

para leer el contenido usamos text.value

podemos utilizar javascript vanilla utilizando la nomenclatuira camelcase para nombres de mas de una palabra

<template>
  <div>{{ counter }}</div>
</template>

<script>
    import { ref } from "vue";
    
    export default {
        setup() {
            const counter = ref(0);

            setInterval(() => counter.value++,500);
            
            return { 
              counter,
            }
        },
    };
</script>

ref permite crear una referencia reactiva a un objecto

<script>
    import { ref } from "vue";
    
    export default {
        setup() {
            const text = ref("text");

            return { 
              text,
            }
        },
    };
</script>

Watch

Watchers pero utilizando composition API

watcher son funciones que permiten escuchar cuando una variable reactiva cambia su valor y se puede acceder a su valor antiguo y nuevo y hacer algo con ellos.

Si utilizamos reactive debe accederse atraves de función

<script>
    import { reactive, watch } from "vue";
    
    export default {
        setup() {
            const obj = reactive({counter:0});

            setInterval(() => obj.counter++,500);

            watch( () => obj.counter, (value, old) => {
                console.log(value, old);
            });

            return { 
              obj,
            }
        },
    };
</script>

Si utilizamos ref solo es necesario la variable

<script>
    import { watch, ref } from "vue";
    
    export default {
        setup() {
            const counter = ref(0);

            setInterval(() => counter.value++,500);

            watch(counter, (value, old) => {
                console.log(value, old);
            });
            return { 
              counter,
            }
        },
    };
</script>

Computed

Las funciones computadas ayudan a tener un template mas limpio, en un composition api se utilizan de la siguiente manera:

<template>
  <div>{{ fullName }}</div>
</template>

<script>
    import { ref, computed } from "vue";
    
    export default {
        setup() {
            const firstName = ref('Kate');
            const lastName = ref('Castaño');

            const fullName = computed(() => {
                return `${firstName.value} ${lastName.value}`
            });
            return { 
                fullName
            }
        },
    };
</script>

Props

Propiedades del componente (parametros). Seguimos necesitando declarar la opcion props antes del setup. No basta con recibirlas como argumentos en setup.

Componente Home

<template>
  <div>{{ fullName }}</div>
</template>

<script>
    import { toRefs, computed } from "vue";
    
    export default {
        props:{
            firstName: String,
            lastName: String,
        },
        setup(props) {            

            const {firstName , lastName } = toRefs(props);

            const fullName = computed(() => {
                return `${firstName.value} ${lastName.value}`
            });
            return { 
                fullName
            }
        },
    };
</script>

Llamada del componente Home con props

<template>
  <Home first-name="Developer" last-name="Vue"></Home>
</template>

Context

Es lo que va a utilizar Vue para enviar datos que pueden ser util durante la ejecución del componente

setup(props, context) {
  console.log(context)
}

Provide / Inject

Es la forma en que vue ofrece para poder comunicar componentes profundos con el componente padre

Para enviar datos: provide

<template>
  <Home first-name="Developer" last-name="Vue"></Home>
</template>

<script>
    import Home from "./components/Home.vue";
    import { provide } from "vue";
    
    export default {
        name: "App",
        components: {
            Home,
        },
        setup() {
          provide("username", "developuser");
        },
    };
</script>

Para recibir los datos: inject

<template>
  <div>{{ fullName }}</div>
  <div>{{ username }}</div>
</template>

<script>
  import { toRefs, computed, inject } from "vue";
  export default {
    props: {
      firstName: String,
      lastName: String,
    },
    setup(props, { expose }) {
      const { firstName, lastName } = toRefs(props);
      const fullName = computed(() => {
        return `${firstName.value} ${lastName.value}`;
      });
      const username = inject("username");
      expose({
        fullName,
      });
      return {
        fullName,
        username,
      };
    },
  };
</script>

Template refs

Enviar html reactivos con composition API

Script setup

Es una azucar sintatica generada de vue, es decir al agregarle setup a la etiqueta script de componente, ya no es necesario declarar la variable y quedaria la estructura de la siguiente manera:

<template>
  <div>{{ fullName }}</div>
  <div>{{ username }}</div>
  <button ref="btn">Click!</button>
</template>

<script setup>
import { defineProps, defineExpose, toRefs, computed, inject, ref, watch } from "vue";

const props = defineProps({
    firstName: String,
    lastName: String,
});

const { firstName, lastName } = toRefs(props);
const fullName = computed(() => {
    return `${firstName.value} ${lastName.value}`;
});
const username = inject("username");

defineExpose({
    fullName,
});

const btn = ref(null);

console.log(btn.value);

watch(btn, (valor) => {
    console.log(valor);
})


</script>

Ya no se utiliza el export

Preguntas frecuentes

¿Para qué sirve el archivo App.vue?

Es el root component que contiene a toda nuestra aplicación

¿Cuál es la forma de crear watchers en Composition API?

Utilizando wath como una función

¿Cuál es la función de Vue CLI?

Permitirnos crear y configurar nuestros proyectos

¿Qué sucede con el return al utilizar script setup?

Ya no es necesario porque ahora todo, en el contexto de setup, está expuesto para el template

¿Porqué no podemos acceder a otras propiedades de instancia en setup de Composition API?

Porque esta se ejecuta antes que el Options API, por lo que no podemos acceder a nada de lo que antes se accedía con this.

¿Para qué nos sirven los teleports?

Para enviar elementos del DOM a otra parte distinta a dónde se definieron

¿Cuál es la forma de crear propiedades computadas en Composition API?

Utilizando computed como una función

¿Cuál es la principal diferencia entre Options API y Composition API?

Options API utiliza JSON para definir el component, mientras que Composition API utiliza una sintaxis de programación funcional

¿Cuál es la principal ventaja de Composition API sobre Options API?

Que podemos escribir código directamente en lugar de hacer todo en un objecto JSON
Que podemos organizar nuestro código por lo que hace y no por lo que cada cosa significa para el framework
Que podemos utilizar una sintaxis de programación funcional y reactiva
Que podemos reutilizar nuestro código sin necesidad de mixins

¿Qué es el Virtual DOM?

Es un objecto de Javascript que representa el àrbol DOM pero nos permite realizar modificaciones màs eficientes

¿Cuál es la principal diferencia al utilizar script setup?

Que tendremos que importar nuevas funciones para definir cosas como props, emits, expose

¿Qué sucede con el export default al utilizar script setup?

Ya no podemos utilizar porque causarìa un conflicto, ademàs ya no es necesario

¿Cuál de estos NO es un hook de ciclo de vida de VueJS?

crashed

¿Cuál es la principal desventaja de la sintaxis script setup?

Que solo podemos utilizarla dentro de Single File Components

¿Cómo podemos utilizar $ref en Composition API?

No podemos, para esto contamos con las variables ref y exponerlas en el return de la función septup

¿Qué cosas podemos acceder vía context en Composition API?

Attrs, emit, expose y slots

¿Cómo puedes definir componentes asíncronos en VueJS?

Por medio de importar los componentes con defineAsyncComponent

¿Porqué se creó Composition API?

Para permitir un código más limpio, reutilizable y mejor organizado

¿Cómo se utiliza Provide/Inject en Composition API?

Utilizando provide e inject como funciones

¿Cuáles son las clases que nos genera el componente transition?

Las clases necesarias para utilizar: enter, leave, active, from y start

¿Cuáles son las funciones para crear variables reactivas en Composition API?

Ref y Reactive

¿Qué podemos hacer con los hooks del ciclo de vida de componentes?

Podemos ejecutar código en cada etapa distinta del ciclo de vida de un componente

¿Qué son los built-in components de VueJS?

Algunos componentes que VUEJS nos ofrece, para hacer componente de una forma más profesional

¿Para qué sirven los mixins?

Nos permiten reutilizar código entre componentes

¿Cuál es la forma de utilizar hooks del ciclo de vida en Composition API?

¿Cuál es el comando para generar un nuevo proyecto en Vue CLI?

vue create

¿Cómo puedes definir componentes dinámicos en VueJS?

Utilizando con su atributo is

¿Cómo puedes hacer reactivos los props dentro de setup en Composition API?

Utilizando toRefs

¿Cuál es la principal ventaja de la sintaxis script setup?

¿Cuál es la función que reemplaza los hooks beforeCreate y created?

Setup

katecr / vue-composition-api Goto Github PK

vue-composition-api's Introduction

VUE