Introducción: fundamentos de Vue.js

1

Desarrollo de Aplicaciones Web con Vue.js 3

2

Fundamentos de Vue JS: Construyendo Aplicaciones Reactivas

3

Vue.js: Framework Progresivo y Reactivo para Aplicaciones Web

4

Aplicación Básica con JavaScript y Renderizado Declarativo

5

Capa Declarativa y Virtual DOM en Vue.js

Reactividad a profundidad

6

Paradigma de Reactividad: Conceptos y Aplicaciones Prácticas

7

Creación de Framework Reactivo con Proxies en JavaScript

8

Creación de un Mini Framework Reactivo desde Cero

9

Programación Reactiva con Proxies en JavaScript

10

Uso de Reflect para Simplificar Proxies en JavaScript

11

Programación Reactiva: Efectos, Track y Trigger en JavaScript

12

Reactividad en JavaScript: Efectos, Trackers y Triggers

Templates de Vue.js

13

Templates de HTML en Vue.js: Mejores Prácticas Esenciales

14

Implementación de Vue.js en Proyecto eCommerce Reactivo

15

Expresiones

16

Atributos Dinámicos en Vue.js: Uso de Clases y Estilos Reactivos

17

Rendering Condicional en View.js: Uso de v-show y v-if

18

Renderizado de Listas en HTML con VueJS

19

Eventos y Dinamismo en Templates HTML con Vue JS

APIs internas de Vue.js

20

Options API vs. Composition API

21

Diferencias entre Options API y Composition API en Vue.js

22

Creación de Métodos Personalizados con Vue JS Options API

23

Creación de Métodos Personalizados con Composition API en Vue.js

24

Uso de Reactive para Agrupar Estados en Composition API

Segunda capa: componentes de Vue.js

25

Creación de Componentes en Vue para Aplicaciones Modulares

26

Conexión de Datos entre Componentes en VueJS: Usando Props y Composition API

27

Creación de Componentes Personalizados en Aplicaciones Web

28

Creación de Eventos Personalizados en Vue para Comunicación entre Componentes

29

Eventos personalizados con Composition API en Vue.js

30

Observadores Personalizados con Watchers en Vue.js

31

Creación de Observadores Personalizados en Vue Composition API

32

Propiedades Computadas en Vue: Simplificación y Dinámica Reactiva

33

Propiedades Computadas con Composition API en Vue.js

34

Ciclos de Vida en Vue.js: Uso Práctico y Carga de Datos desde API

35

Ciclos de Vida en Composition API de Vue.js

Siguientes pasos

36

Desarrollo de Frontend para Ecommerce con Vue.js 3

37

Reactividad y Programación en Vue: Efectos y Ciclos de Vida

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Options API vs. Composition API

20/37
Recursos

Aportes 11

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En Vue 3 se introduce la Composition API, una nueva forma alternativa de escribir código en Vue.
La Composition API está diseñada para mejorar sustancialmente la capacidad de crecimiento de un proyecto, así como facilitar la reutilización de componentes.

La modalidad Options API nos permite trabajar mediante opciones en un objeto de Vue. La información está separada por nombre de estructuras, de modo que la curva de aprendizaje es muy sencilla y agradable, y resulta muy apropiado para usuarios que comienzan a trabajar con frameworks:

Por otro lado, la Composition API, en lugar de separar la información en opciones, utiliza un método especial (hook) llamado setup() donde podremos escribir nuestro código Javascript de inicialización del componente. Dicho hook devolverá un object con los elementos que queramos utilizar en el resto del componente.

Para que se entienda mejor:
.
Options API: Es básicamente tener todo el código en el mismo componente, vas poniendo tus métodos, tus propiedades computadas y demás, y en cada uno se van mezclando las funcionalidades independientes de la aplicación, algo así:


const app = createApp({

	data(){
		return {
			// Toda la data de unas 100 lineas de código
		}
	},

	methods: {
	
		unMetodo(){},

		otroMetodo(){},

		// 50 Métodos más		

	},

	computed: {
	
		unaComputed(){},

		otraComputed(){},

		// 50 computeds más		

	}

});

Como pueden ver el código empieza a crecer, imaginemos que queremos ver cuál es la propiedad que queremos usar dentro de mi computed número 25, tendría que hacer un scroll enorme y comerme esos 50 métodos que están arriba para llegar hasta las propiedades (por eso se dice que están separados), en estos casos es mejor usar Composition API.
.
Composition API: Básicamente aquí tenemos ya nuestras funciones juntas, en lugar de tenerlas separados, es decir, poner las variables en data, poner los métodos y todo separado, con Composition API podemos tenerlas juntasdentro deuna misma función, esta documentación oficial de Vue lo explica perfectamente:
.
https://v3.vuejs.org/guide/composition-api-introduction.html#standalone-computed-properties

Reflexión:
Cuando estamos construyendo una aplicación donde la segmentamos en múltiples partes o interfaces, las conocemos como componentes.
Por sí solo, el llevar la aplicación a este concepto, nos permite la facilidad de mantenimiento y, sobre todo, flexibilidad para la escalabilidad. Sin embargo, esa misma magnitud que convierte al proyecto, tendríamos cada vez más muchos componentes evitando que Vue, sea progresivo.
Ahí es donde se nos apoyamos de esta Compoistion API

para una persona que inicia con Vue, es mejor usar Option API o comenzar con la Composition API?tomando en cuenta que sea el mismo tipo de proyecto(tamano)

Ya me dio hambre por hablar de tanta comida jajajaj, excelente

en proyectos con vue cli, vi que usaba options api es extenso cuando tienes muchos metodos, objetos,etc por ello composition api parece una buena opción.

La composición API proporciona una forma funcional y reutilizable de organizar su código, mientras que options API proporciona un enfoque tradicional orientado a objetos.
Me di cuenta que he estado haciendo muchas cosas al revés. Excelente clase y explicación con Ratatouille!
  • Options API: es propio de vue2 y es compatible con vue3. La sintaxis de esta forma de trabajo puede ser mas extensa en cuanto a legibilidad de codigo.

  • Composition API: Es la nueva forma de trabajar que se propuso con vue3. Una de sus ventajas es que se escriben menos lineas de codigo y utilizando composables se puede reutilizar logica en diversos componentes.

Un concepto nuevo para mi, se ve chevere y me parece una forma excelente de organizar codigo!

Options API
Objeto de opciones para ocnfigurar nuestra aplicacion o componente
*ventajas:
Es muy facil para iniciar y crear cosas simples
Composition API
Funcionalidad interna para componer y organizar para caracteristicas (features)