Vue 2 vs Vue 3

Question 1

v-on

Answer 1

    <button v-on:click="handleClick">Click aquí</button>
    <button @click="handleClick">Click aquí</button>

Question 2

Características principales del Composition API

Answer 2

1. Modularidad y Reutilización:
   
   • Con Composition API, puedes agrupar lógicamente fragmentos de código relacionados (como estado, métodos y efectos secundarios) en lugar de dividirlos por opciones como data, methods o computed. Esto mejora la legibilidad y facilita la reutilización del código.
2. Declarativo y Funcional:
   
   • Usa funciones y valores reactivos (proporcionados por Vue) para declarar estado reactivo y lógica en lugar de depender de propiedades específicas dentro de un objeto de configuración.
3. Mejor Tipado con TypeScript:
   
   • Composition API está diseñado para aprovechar al máximo las capacidades de TypeScript, ofreciendo un mejor soporte de tipado y autocompletado en comparación con Options API.

Question 3

Composition API: setup

Answer 3

1. setup:
   
   • Es el punto de entrada principal en el Composition API. Dentro de setup, defines tu lógica y el estado del componente.
     ```javascript
     import { ref, computed } from ‘vue’;
   export default {
   setup() {
   const count = ref(0); // Estado reactivo
   const doubleCount = computed(() => count.value * 2); // Propiedad computada

   const increment = () => {
     count.value++;
   };
   
   return {
     count,
     doubleCount,
     increment
   };   } }; ```

Question 4

Composition API: ref

Answer 4

• ref: Crea un valor reactivo. Úsalo cuando necesites datos primitivos reactivos (como números o cadenas).
  
  • reactive: Crea un objeto reactivo. Es útil para estructuras de datos más complejas.
    ```javascript
    const state = reactive({
    count: 0,
    message: ‘Hello’
    });const increment = () => {
    state.count++;
    };
    ```

Question 5

Composition API: computadas

Answer 5

Usa computed para definir propiedades derivadas de forma reactiva.

const contador = computed(() => {
  if (a.value > 0) return "positive";
  else if (a.value < 0) return "negative";
  else return "zero";
});

Question 6

Composition API: Watchers

Answer 6

• Usa watch para ejecutar código en respuesta a cambios reactivos.```javascript
  import { ref, watch } from ‘vue’;const count = ref(0);watch(count, (newValue, oldValue) => {
  console.log(Count cambió de ${oldValue} a ${newValue});
  });
  ```

Question 7

Ventajas del Composition API

Answer 7

1. Organización más limpia:
   
   • Ayuda a organizar mejor la lógica compleja de los componentes.
2. Reutilización fácil de lógica:
   
   • Puedes extraer lógica en composables (funciones reutilizables) que encapsulan comportamiento y estado.
3. Soporte avanzado de TypeScript:
   
   • Ofrece un entorno más sólido para el desarrollo con tipado estático.

Question 8

Props en Vue 3

Answer 8

const props = defineProps({
title: {
type: String,
default: “Título por defecto”,
},
count: {
type: Number,
default: 0,
},
isActive: {
type: Boolean,
required: true,
},
});

<p>¡El componente está activo!</p>

<p v-else>El componente está inactivo.</p>

Question 9

defineEmit

Answer 9

No, defineEmit no está disponible en Vue 2. Este es un método introducido con la Composition API de Vue 3, que permite definir eventos que un componente puede emitir, proporcionando una forma más declarativa de trabajar con eventos en componentes.

En Vue 2, la forma de emitir eventos desde un componente hijo al padre es utilizando el método

Question 10

Rutas con Vue Router

Answer 10

1. configuras carpeta router con index.js
2. usas RouterView
3. <router-link :to'' >

Question 12

Diferencia entre servicios, mixins y composables en Vue 3

Answer 12

• Servicios: Lógica compartida sin reactividad, útiles para manejar datos o estado global, no dependen de Vue.
• Mixins: Reutilizan opciones de componentes, pero pueden generar conflictos. Desaconsejados en Vue 3.
• Composables: Funciones modernas y reactivas con Composition API, recomendadas para lógica reutilizable.

Question 13

¿Qué son los utils y en qué se diferencian de servicios, mixins y composables?

Answer 13

• Utils: Funciones puras y genéricas sin reactividad, independientes del framework. Útiles para tareas comunes como validaciones o formateos.
• Diferencia: No tienen estado ni reactividad (como servicios), son más simples que composables y no dependen de Vue (como mixins o composables).

Question 14

mapState

Answer 14

// Con mapState
import { mapState } from 'vuex';

computed: {
  ...mapState({
    userName: state => state.user.name,
    isAuthenticated: state => state.auth.isAuthenticated
  })
}

// Acceso a un módulo específico
computed: {
  ...mapState('user', {
    name: state => state.name,
    age: state => state.age
  })
}