Vue

Question 1

¿Cómo configuras propiedades reactivas en Vue 3?

Answer 1

¿Qué es la reactividad en Vue 3?
La reactividad en Vue 3 permite que la interfaz de usuario se actualice automáticamente cuando los datos del modelo cambian. Vue hace esto mediante la creación de referencias reactivas para las propiedades del estado, lo que significa que cualquier cambio en ellas desencadenará una actualización automática en la vista.

Formas de configurar propiedades reactivas:

1. Usando reactive():
   La función reactive() convierte un objeto entero en reactivo, permitiendo que sus propiedades se actualicen automáticamente en la interfaz cuando cambian.#### Ejemplo:```javascript
   import { reactive } from ‘vue’;const estado = reactive({
   contador: 0,
   mensaje: ‘Hola Vue!’
   });// Modificación reactiva
   estado.contador++; // Esto actualizará automáticamente la vista
   ```
2. Usando ref():
   La función ref() se utiliza para crear una referencia reactiva de valores primitivos como números, cadenas o booleanos.#### Ejemplo:```javascript
   import { ref } from ‘vue’;const contador = ref(0);// Modificación reactiva
   contador.value++; // Necesitas usar .value para acceder al valor y modificarlo
   ```
   • Cuando usas ref(), el valor debe ser accesado mediante la propiedad .value.
3. Uso combinado de reactive() y ref():
   En Vue 3, puedes combinar ambos métodos según el tipo de datos que quieras hacer reactivos.#### Ejemplo:```javascript
   import { reactive, ref } from ‘vue’;const estado = reactive({
   usuario: {
   nombre: ‘Juan’
   }
   });const edad = ref(30);
   ```

¿Cuándo usar reactive() vs ref()?
- reactive() es ideal para objetos y arrays complejos.
- ref() es ideal para valores primitivos o cuando se necesita hacer referencia a un solo valor.

Resumen:
En Vue 3, las propiedades reactivas se configuran utilizando reactive() para objetos y arrays, y ref() para valores primitivos. Estos métodos aseguran que cualquier cambio en los datos se refleje automáticamente en la interfaz de usuario.

Question 2

¿Cuáles son las diferencias entre Vue 2 y Vue 3 en el manejo del ciclo de vida?

Answer 2

Vue 2:
- El ciclo de vida se maneja con opciones dentro del componente, como created, mounted, updated, y destroyed.

Ejemplo:

```javascript
created() {
console.log(‘Componente creado’);
}
~~~

Vue 3:
- Utiliza la Composition API, con funciones como onMounted(), onUpdated(), onBeforeUnmount(), dentro del setup().

Ejemplo:

```javascript
import { onMounted } from ‘vue’;

onMounted(() => {
console.log(‘Componente montado’);
});
~~~

Resumen:
- Vue 2 usa un enfoque basado en opciones dentro del componente.
- Vue 3 usa la Composition API con funciones de ciclo de vida dentro de setup().

Question 3

¿Cómo se maneja el estado global en Vue utilizando Vuex o Pinia?

Answer 3

Vuex (Vue 2 y Vue 3):
- Vuex es una biblioteca oficial para manejar el estado global en Vue. Permite centralizar el estado de la aplicación y gestionarlo mediante un store.
- Se utiliza principalmente en Vue 2, pero también es compatible con Vue 3.

Ejemplo con Vuex:

```javascript
// store.js
import Vue from ‘vue’;
import Vuex from ‘vuex’;

Vue.use(Vuex);

const store = new Vuex.Store({
state: {
contador: 0
},
mutations: {
incrementar(state) {
state.contador++;
}
},
actions: {
incrementarAsync({ commit }) {
setTimeout(() => {
commit(‘incrementar’);
}, 1000);
}
}
});

export default store;
~~~

En el componente:

```javascript
// Componente
computed: {
contador() {
return this.$store.state.contador;
}
},
methods: {
incrementar() {
this.$store.commit(‘incrementar’);
}
}
~~~

Pinia (Vue 3):
- Pinia es la nueva alternativa oficial a Vuex para Vue 3. Es más ligera y fácil de usar, con un enfoque más moderno y una mejor integración con la Composition API.
- Pinia usa stores que se crean con la función defineStore().

Ejemplo con Pinia:

```javascript
// store.js
import { defineStore } from ‘pinia’;

export const useContadorStore = defineStore(‘contador’, {
state: () => ({
contador: 0
}),
actions: {
incrementar() {
this.contador++;
}
}
});
~~~

En el componente:

```javascript
// Componente
import { useContadorStore } from ‘./store’;

const store = useContadorStore();

store.incrementar(); // Llama a la acción
~~~

Resumen:
- Vuex es la opción tradicional para manejar el estado global en Vue (principalmente en Vue 2, pero también en Vue 3).
- Pinia es una solución moderna para Vue 3, más ligera y compatible con la Composition API.

Question 4

Explica cómo usar v-model para enlazar datos bidireccionales.

Answer 4

v-model en Vue 3 se usa para crear un enlace bidireccional entre el modelo de datos y la vista. Esto significa que cualquier cambio en el valor de la propiedad se refleja en la vista, y cualquier cambio en la vista actualiza el valor de la propiedad.

Cómo usar v-model en Vue 3:

1. Enlazar datos con un input:
   
   • Usamos v-model para enlazar un valor en el modelo con un campo de entrada, como un input, textarea, o select.

```vue

<template>
<div>
<input></input>
<p>{{ mensaje }}</p>
</div>
</template>

<script>
export default {
  data() {
    return {
      mensaje: 'Hola Mundo'
    };
  }
};
</script>

En este ejemplo, cualquier cambio en el `input` actualizará la propiedad `mensaje` y viceversa.

2. **Uso de `v-model` con componentes personalizados**:
   - Para componentes personalizados, Vue 3 permite usar `v-model` con un nombre de prop personalizado (`modelValue`) y emitir un evento `update:modelValue` para manejar la actualización del valor.

Ejemplo con componente personalizado:

```vue
<!-- Componente InputPersonalizado.vue -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>

<script>
export default {
  props: {
    modelValue: String
  }
};
</script>

```vue
<!-- Componente principal -->

<template>
<div>
<InputPersonalizado></InputPersonalizado>
<p>{{ mensaje }}</p>
</div>
</template>

<script>
import InputPersonalizado from './InputPersonalizado.vue';

export default {
  components: {
    InputPersonalizado
  },
  data() {
    return {
      mensaje: 'Hola desde el componente padre'
    };
  }
};
</script>

~~~

Resumen:
- v-model permite un enlace bidireccional entre la propiedad de datos y un campo en la vista.
- En Vue 3, para componentes personalizados, el valor se pasa mediante modelValue y se actualiza con el evento update:modelValue.

Question 5

¿Cómo optimizar el rendimiento de un componente Vue?

Answer 5

Aquí tienes la tarjeta sobre cómo optimizar el rendimiento de un componente Vue 3:

Pregunta (Front):
¿Cómo optimizar el rendimiento de un componente Vue 3?

Respuesta (Back):

Técnicas para optimizar el rendimiento en Vue 3:

1. Uso de v-show en lugar de v-if:
   
   • Usa v-show cuando necesites alternar la visibilidad de un elemento sin eliminarlo del DOM. v-if puede ser costoso cuando se agrega o elimina un elemento repetidamente.
2. Memoización con computed:
   
   • Usa propiedades computed en lugar de funciones dentro del template para evitar cálculos repetitivos. computed es cacheado, por lo que solo se recalcula cuando sus dependencias cambian.
3. Lazy loading de componentes:
   
   • Carga los componentes de manera perezosa (lazy loading) para que no se carguen hasta que se necesiten. Esto puede mejorar el tiempo de carga inicial.

   javascript
   const Componente = defineAsyncComponent(() => import('./Componente.vue'));

4. Uso de defineComponent y defineProps:
   
   • Usa defineComponent y defineProps con la Composition API para una mejor optimización y un manejo más eficiente de las propiedades y los componentes.
5. Evitar el uso excesivo de watch:
   
   • Los watchers pueden ser costosos. Usa watchEffect si no necesitas comparar valores anteriores y nuevos, y prefiere las propiedades computadas cuando sea posible.
6. Evitar renderizados innecesarios:
   
   • Usa el modificador key para evitar renderizados innecesarios en listas de elementos. Esto ayuda a Vue a hacer una comparación más eficiente.

   vue
   <div v-for="item in items" :key="item.id">{{ item.name }}</div>

7. Optimización de eventos y métodos:
   
   • Usa el modificador .once en eventos para asegurarte de que se ejecutan solo una vez y no generan eventos innecesarios.
8. Fragmentos y el DOM virtual:
   
   • Aprovecha la capacidad de Vue 3 para renderizar elementos en fragmentos o usar DOM virtual para optimizar el rendimiento en listas grandes.

Resumen:
- Usa v-show para visibilidad, computed para cálculos eficientes, carga perezosa de componentes, y optimiza la reactividad con watchEffect y key en listas.
- La Composition API y la optimización de renderizados te ayudarán a mejorar el rendimiento en Vue 3.

Question 6

¿Qué son las directivas personalizadas en Vue 3 y cómo se crean?

Answer 6

¿Qué son las directivas personalizadas?
Las directivas personalizadas en Vue 3 son instrucciones especiales que puedes agregar a elementos del DOM para realizar manipulaciones o efectos específicos. Estas directivas permiten agregar comportamiento personalizado a los elementos HTML.

Cómo crear una directiva personalizada:

1. Definir la directiva:
   Se define usando app.directive() dentro de la instancia de Vue.

Ejemplo básico:

```javascript
const app = Vue.createApp({});

app.directive(‘enfocar’, {
mounted(el) {
el.focus(); // Cuando el elemento es montado, se enfoca
}
});

app.mount(‘#app’);
~~~

2. Uso en el template:

```vue

<template>
<input></input>
</template>

~~~

Resumen:
- Las directivas personalizadas permiten manipular el DOM de manera específica.
- Se crean con app.directive() y pueden tener varios hooks como mounted, updated, etc.

Question 6

¿Cuáles son las diferencias entre watchEffect y watch en Vue 3?

Answer 6

watchEffect:
- Automático y reactivo: watchEffect ejecuta una función reactiva automáticamente cada vez que se detecta un cambio en cualquier propiedad utilizada dentro de la función.
- Uso más simple: No es necesario especificar qué propiedades se deben observar, ya que watchEffect observa todas las que se usan dentro de su cuerpo.
- Ideal para efectos secundarios donde no se sabe con antelación qué propiedades deben ser observadas.

Ejemplo con watchEffect:

```javascript
import { ref, watchEffect } from ‘vue’;

const contador = ref(0);

watchEffect(() => {
console.log(El contador es: ${contador.value});
});

contador.value = 1; // La función se ejecutará automáticamente.
~~~

watch:
- Más controlado: watch permite observar propiedades específicas y ejecutar una función cuando cambia una propiedad observada.
- Permite acceso a valores anteriores y nuevos: Se puede acceder tanto al valor anterior como al nuevo dentro de la función de callback.
- Ideal para reaccionar a cambios específicos en el estado.

Ejemplo con watch:

```javascript
import { ref, watch } from ‘vue’;

const contador = ref(0);

watch(contador, (nuevoValor, valorAnterior) => {
console.log(El contador ha cambiado de ${valorAnterior} a ${nuevoValor});
});

contador.value = 1; // La función se ejecutará solo cuando ‘contador’ cambie.
~~~

Resumen:
- watchEffect observa automáticamente cualquier propiedad utilizada dentro de su función.
- watch permite observar propiedades específicas y reaccionar ante sus cambios, accediendo a los valores anteriores y nuevos.

Question 7

¿Cómo manejarías rutas protegidas en Vue Router?

Answer 7

Manejo de rutas protegidas en Vue Router:

1. Usar un beforeEach guard:
   
   • Puedes definir un navegador global con beforeEach para verificar si el usuario tiene acceso a la ruta antes de permitir la navegación.

Ejemplo:

```javascript
import { createRouter, createWebHistory } from ‘vue-router’;

const routes = [
{ path: ‘/login’, component: Login },
{ path: ‘/dashboard’, component: Dashboard, meta: { requiresAuth: true } },
];

const router = createRouter({
history: createWebHistory(),
routes,
});

router.beforeEach((to, from, next) => {
const isAuthenticated = // lógica para verificar autenticación (ej., desde Vuex o localStorage)

if (to.meta.requiresAuth && !isAuthenticated) {
next(‘/login’); // Redirige si no está autenticado
} else {
next(); // Permite la navegación
}
});

export default router;
~~~

2. Uso de meta en las rutas:
   
   • Asigna una propiedad meta a las rutas que requieran protección, como requiresAuth: true, y luego verifica esa propiedad en el guard.

Resumen:
- Usa beforeEach para comprobar la autenticación antes de acceder a rutas protegidas.
- Verifica propiedades meta para identificar rutas que requieren autenticación.

Question 8

¿Qué es un “scoped slot” y para qué se utiliza?

Answer 8

Aquí tienes la tarjeta sobre “scoped slot”:

¿Qué es un “scoped slot”?
Un “scoped slot” en Vue es un tipo de slot que permite pasar datos del componente hijo al componente padre. Es útil cuando necesitas que el contenido del slot tenga acceso a datos específicos del componente hijo.

¿Cómo funciona?
En lugar de solo insertar contenido estático, un scoped slot permite al componente hijo proporcionar datos dentro del slot para que el componente padre los use.

Ejemplo:

```vue
<!-- Componente hijo -->

<template>
<div>
<slot :mensaje="mensaje"></slot>
</div>
</template>

<script>
export default {
  data() {
    return {
      mensaje: '¡Hola desde el hijo!'
    };
  }
};
</script>

```vue
<!-- Componente padre -->
<template>
  <hijo>
    <template #default="{ mensaje }">
      <p>{{ mensaje }}</p>
    </template>
  </hijo>
</template>

En este ejemplo, el componente hijo pasa el mensaje al slot y el componente padre lo usa dentro de su template.

Resumen:
- Un scoped slot permite que el componente hijo pase datos dinámicos al componente padre.
- Se usa cuando el componente padre necesita usar datos o propiedades del componente hijo dentro del slot.

Question 9

¿Cómo implementarías un filtro personalizado en Vue?

Answer 9

¿Qué es un filtro personalizado?
Un filtro personalizado en Vue permite transformar el valor de una expresión antes de mostrarlo en la vista. Los filtros pueden usarse en el template para aplicar transformaciones como formatear fechas, cambiar texto, etc.

Cómo crear un filtro personalizado en Vue 3:

1. Filtro global: Se registra globalmente para ser usado en cualquier componente.
   ```javascript
   const app = Vue.createApp({});app.config.globalProperties.$filters = {
   mayusculas(value) {
   return value.toUpperCase();
   }
   };app.mount(‘#app’);
   ```Luego, en el template:
   ```vue<template>
   <p>{{ 'hola' | mayusculas }}</p> <!-- "HOLA" -->
   </template>```
2. Filtro local: Se registra en el componente específico usando la opción filters.
   ```vue<template>
   <p>{{ 'hola' | mayusculas }}</p>
   </template>

   <script>
   export default {
     filters: {
       mayusculas(value) {
         return value.toUpperCase();
       }
     }
   };
   </script>

   ```

Resumen:
- Los filtros personalizados se crean con una función que transforma un valor antes de mostrarlo.
- Se pueden registrar globalmente o localmente según las necesidades del proyecto.

Question 10

¿Qué es el Composition API y cómo mejora el desarrollo en Vue 3?

Answer 10

¿Qué es el Composition API?
El Composition API es una nueva forma de organizar y reutilizar la lógica en Vue 3. A diferencia del Options API (usado en Vue 2), que organiza el código por opciones como data, methods, computed, etc., el Composition API permite organizar el código por funcionalidades o comportamientos relacionados.

Principales características:
1. ref y reactive: Permiten crear referencias reactivas y objetos reactivos.
```javascript
import { ref } from ‘vue’;

const count = ref(0);
```

2. computed: Permite crear propiedades computadas.
   ```javascript
   import { computed } from ‘vue’;const doubleCount = computed(() => count.value * 2);
   ```
3. watch: Permite observar cambios en valores reactivos.
   ```javascript
   import { watch } from ‘vue’;watch(count, (newValue, oldValue) => {
   console.log(Count changed from ${oldValue} to ${newValue});
   });
   ```
4. setup: La función setup es el punto de entrada donde se definen todas las reactividades, funciones, y propiedades.
   

   javascript
   export default {
     setup() {
       const count = ref(0);
       return { count };
     }
   };

¿Cómo mejora el desarrollo?
- Mayor reutilización de lógica: Puedes agrupar funcionalidades relacionadas sin tener que preocuparte por las opciones de los componentes, lo que facilita la reutilización y la mantenibilidad del código.
- Mejor organización: El código es más modular y organizado, especialmente en componentes complejos.
- Mejor soporte para TypeScript: La Composition API se adapta mejor a TypeScript, proporcionando mejor inferencia de tipos y una mayor flexibilidad.

Resumen:
- La Composition API organiza la lógica en torno a funcionalidades y no en torno a las opciones del componente.
- Mejora la reutilización, modularidad y la integración con TypeScript.

¿Te gustaría ver más ejemplos de cómo usar la Composition API en Vue 3? 😊

Question 11

¿Qué son las “composables” en Vue?

Answer 11

¿Qué son las “composables”?
Las “composables” son funciones reutilizables que encapsulan una lógica reactiva y pueden ser compartidas entre diferentes componentes utilizando el Composition API. Permiten extraer la lógica relacionada en funciones independientes, mejorando la organización y reutilización del código.

¿Cómo se crean las composables?
Las composables son funciones que generalmente usan las APIs reactivas de Vue (como ref, reactive, computed, etc.) y que pueden ser reutilizadas en múltiples componentes.

Ejemplo de una composable:

```javascript
// useCounter.js
import { ref } from ‘vue’;

export function useCounter() {
const count = ref(0);

const increment = () => {
count.value++;
};

const decrement = () => {
count.value–;
};

return { count, increment, decrement };
}
~~~

En un componente:

```vue

<template>
<button @click="increment">Incrementar</button>
<p>{{ count }}</p>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();

    return { count, increment };
  }
};
</script>

~~~

¿Por qué usar composables?
- Reutilización de lógica: Permiten compartir funcionalidades entre diferentes componentes sin duplicar código.
- Modularidad: Facilitan la organización del código, separando la lógica en funciones pequeñas y reutilizables.
- Flexibilidad: Puedes usar composables tanto dentro de un solo componente como compartirlos entre varios.

Resumen:
- Las composables son funciones reutilizables que encapsulan la lógica reactiva en Vue.
- Se crean utilizando el Composition API y mejoran la organización, reutilización y modularidad del código.

¿Te gustaría ver más ejemplos de composables o alguna otra aplicación práctica? 😊

Question 12

¿Cómo realizarías pruebas unitarias en un componente Vue?

Answer 12

1. Instalar herramientas de prueba:
   Para realizar pruebas unitarias en Vue, necesitas configurar algunas herramientas como Jest (o Mocha) y Vue Test Utils.
   • Instala las dependencias:
     

     bash
     npm install --save-dev @vue/test-utils jest

2. Escribir una prueba unitaria básica:
   Puedes probar un componente Vue simulando eventos, comprobando sus propiedades reactivas y verificando que el DOM se actualice correctamente.

Ejemplo:
Supongamos que tienes un componente Counter.vue que incrementa un contador al hacer clic en un botón.

```vue
<!-- Counter.vue -->

<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Incrementar</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Prueba unitaria con Jest y Vue Test Utils:

```javascript
// Counter.spec.js
import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
  it('debe mostrar el contador inicialmente en 0', () => {
    const wrapper = mount(Counter);
    expect(wrapper.text()).toContain('0');
  });

  it('debe incrementar el contador al hacer clic en el botón', async () => {
    const wrapper = mount(Counter);
    await wrapper.find('button').trigger('click');
    expect(wrapper.text()).toContain('1');
  });
});

Pasos clave para las pruebas:
- Montar el componente: Utiliza mount() de Vue Test Utils para montar el componente en el DOM virtual.
- Simular eventos: Usa trigger() para simular interacciones del usuario como clics o cambios de entrada.
- Verificar el DOM: Usa text() o html() para verificar que el componente se renderiza correctamente con los cambios esperados.
- Verificar cambios reactivos: Usa await para esperar que los cambios reactivos se apliquen antes de hacer las verificaciones.

Resumen:
- Utiliza Vue Test Utils para montar el componente y simular interacciones.
- Usa herramientas como Jest para realizar las aserciones en las pruebas unitarias.
- Verifica que el DOM se actualice correctamente según las interacciones del usuario y los cambios reactivos.

Question 13

¿Qué es el key-binding en Vue y cómo se configura?

Answer 13

¿Qué es el key-binding en Vue?
El key-binding en Vue permite escuchar eventos del teclado, como cuando el usuario presiona una tecla, y ejecutar una acción en respuesta. Se configura usando el modificador @keydown, @keyup, o @keypress en el template.

Cómo se configura:

1. Escuchar eventos del teclado:
   Puedes escuchar eventos como keydown, keyup o keypress para capturar las teclas presionadas.

Ejemplo básico:

```vue

<template>
<input @keydown.enter="handleEnter" @keyup.space="handleSpace" />
</template>

<script>
export default {
  methods: {
    handleEnter() {
      console.log('Enter presionada');
    },
    handleSpace() {
      console.log('Space presionada');
    }
  }
};
</script>

~~~

2. Modificadores de teclas:
   Vue permite usar modificadores para escuchar teclas específicas (por ejemplo, enter, esc, space).```vue<template>
   <input @keydown.enter="onEnter" />
   </template>```Esto solo responderá al evento cuando se presione la tecla Enter.

Resumen:
- El key-binding en Vue se utiliza para escuchar eventos del teclado y ejecutar acciones correspondientes.
- Se configura con modificadores como @keydown.enter o @keyup.space para detectar teclas específicas.

Question 14

¿Cómo manejar múltiples eventos en un solo componente en Vue 3?

Answer 14

Manejar múltiples eventos en Vue 3:

En Vue 3, puedes manejar múltiples eventos en un solo componente de varias formas, como utilizando el sistema de eventos nativo de Vue, pasando eventos personalizados, o mediante las directivas de eventos.

1. Escuchar múltiples eventos:
Puedes escuchar múltiples eventos directamente en el template utilizando las directivas de eventos como @click, @input, @keydown, etc.

```vue

<template>
<button @click="handleClick" @mouseover="handleMouseOver">Botón</button>
<input @input="handleInput" />
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Click');
    },
    handleMouseOver() {
      console.log('Mouse Over');
    },
    handleInput() {
      console.log('Input changed');
    }
  }
};
</script>

**2. Uso de `v-on` para escuchar varios eventos:**
También puedes usar `v-on` para manejar varios eventos con una sola directiva:

```vue
<template>
  <button v-on="buttonEvents">Botón</button>
</template>

<script>
export default {
  data() {
    return {
      buttonEvents: {
        click: this.handleClick,
        mouseover: this.handleMouseOver
      }
    };
  },
  methods: {
    handleClick() {
      console.log('Click');
    },
    handleMouseOver() {
      console.log('Mouse Over');
    }
  }
};
</script>

Resumen:
- Usa @evento para escuchar eventos individuales.
- Puedes manejar varios eventos con una sola directiva usando v-on.

¿Te gustaría más ejemplos de cómo organizar o manejar estos eventos en componentes más complejos? 😊

Question 15

¿Qué son los observers en Vue y cómo funcionan?

Answer 15

¿Qué son los observers en Vue?
Los observers en Vue son una forma de observar y reaccionar a los cambios en los datos reactivos. Vue automáticamente convierte los datos en reactivos, lo que significa que cualquier cambio en esos datos actualizará la vista de manera eficiente.

¿Cómo funcionan?

1. reactive y ref: Vue 3 usa un sistema de observación basado en proxies para rastrear las dependencias reactivas. Cuando un valor cambia, Vue reacciona y actualiza la vista.

Ejemplo básico con reactive:

```javascript
import { reactive } from ‘vue’;

const state = reactive({
count: 0
});

// Aquí, state.count será observado automáticamente
~~~

2. watch: Puedes usar watch para observar cambios en una propiedad reactiva y ejecutar una función en respuesta a esos cambios.

```javascript
import { reactive, watch } from ‘vue’;

const state = reactive({
count: 0
});

// Observamos cambios en state.count
watch(() => state.count, (newCount, oldCount) => {
console.log(Count cambió de ${oldCount} a ${newCount});
});
~~~

3. watchEffect: A diferencia de watch, watchEffect ejecuta una función reactivamente sin necesidad de especificar un valor a observar.

```javascript
import { reactive, watchEffect } from ‘vue’;

const state = reactive({
count: 0
});

// Se ejecuta siempre que cualquier valor reactivo utilizado en el efecto cambie
watchEffect(() => {
console.log(Count es ahora: ${state.count});
});
~~~

Resumen:
- Los observers en Vue permiten reaccionar a cambios en los datos reactivos mediante reactive, watch y watchEffect.
- Vue actualiza automáticamente la vista cuando los datos cambian, lo que facilita la gestión del estado reactivo.

Question 16

¿Cómo configurar un servicio externo con Axios para Vue?

Answer 16

Tienes toda la razón. Para mejorar la organización y la reutilización del código, es una buena práctica crear un archivo de servicios o API para manejar todas las interacciones con los endpoints de la API. Así, tu componente Vue se mantiene limpio y solo se encarga de la lógica de la vista, mientras que la lógica de la comunicación con el servidor se maneja en un archivo separado.

Aquí te muestro cómo podrías hacerlo:

Pregunta (Front):
¿Cómo configurar un servicio externo con Axios en Vue utilizando un archivo aparte?

Respuesta (Back):

Configurar Axios en un archivo de servicio externo:

1. Instalar Axios:
   Asegúrate de tener Axios instalado.

   bash
   npm install axios

2. Crear un archivo de servicio API:
   Crea un archivo donde centralizarás todas las interacciones con la API.```javascript
   // src/services/api.js
   import axios from ‘axios’;const api = axios.create({
   baseURL: ‘https://api.example.com’, // URL base del servicio externo
   timeout: 10000, // Tiempo de espera máximo
   });// Función para obtener los datos
   export const fetchData = () => {
   return api.get(‘/endpoint’); // Llama al endpoint de la API
   };// Puedes agregar más funciones para otros endpoints
   export const postData = (data) => {
   return api.post(‘/endpoint’, data); // Para peticiones POST
   };
   ```
3. Usar el servicio en el componente:
   En tu componente Vue, simplemente importa y usa las funciones definidas en el archivo api.js.```vue<template>
   <div>
   <h1>Datos del API</h1>
   <ul>
   <li v-for="item in data" :key="item.id">{{ item.name }}</li>
   </ul>
   </div>
   </template>

   <script>
   import { fetchData } from '@/services/api';  // Importa el servicio
   
   export default {
     data() {
       return {
         data: []
       };
     },
     mounted() {
       // Llama a la función del servicio para obtener datos
       fetchData()
         .then(response => {
           this.data = response.data;
         })
         .catch(error => {
           console.error('Error al obtener los datos:', error);
         });
     }
   };
   </script>

   ```

Resumen:
- Crea un archivo de servicio (api.js) para centralizar las peticiones HTTP.
- Usa funciones específicas del servicio para realizar peticiones en los componentes Vue.
- Mantén los componentes limpios y reutiliza la lógica de la API de forma organizada.

Question 17

¿Cuál es la diferencia entre keep-alive y v-if para manejar componentes en Vue?

Answer 17

1. keep-alive:
   
   • Propósito: Mantiene el estado de un componente cuando no está visible. Es útil para mejorar el rendimiento al evitar que Vue destruya y vuelva a crear un componente.
   • Uso: Ideal para componentes con estado que no deben reiniciarse cada vez que se muestran u ocultan.
   • Ejemplo:
     ```vue
     <keep-alive>
     <Componente></Componente>
     </keep-alive>```
2. v-if:
   
   • Propósito: Añade o elimina el componente del DOM según la condición evaluada. El componente se crea y destruye cada vez que cambia la condición.
   • Uso: Ideal cuando el componente necesita ser destruido y recreado para resetear su estado o recursos.
   • Ejemplo:
     ```vue
     <div>
     <Componente></Componente>
     </div>```

Resumen:
- keep-alive mantiene el estado del componente y no lo destruye cuando se oculta.
- v-if destruye y recrea el componente cada vez que cambia la condición.

¿Te gustaría más detalles sobre cuándo usar cada uno o ejemplos adicionales? 😊

Question 18

¿Cómo se implementa la renderización condicional en Vue?

Answer 18

Renderización condicional en Vue:

1. v-if:
   
   • Muestra un componente o un elemento en función de una condición.
   • Si la condición es falsa, el componente se destruye.
     ```vue
   <div>Este contenido solo se muestra si isVisible es verdadero</div>```
2. v-else:
   
   • Se usa junto con v-if para mostrar un elemento cuando la condición del v-if es falsa.
     ```vue
   <div>Visible</div><div>No visible</div>```
3. v-else-if:
   
   • Permite encadenar múltiples condiciones.
     ```vue
   <div>Visible</div><div>Cargando...</div><div>No visible</div>```
4. v-show:
   
   • Similar a v-if, pero no destruye el componente. Solo lo oculta con CSS (display: none).
     ```vue
   <div>Este contenido se oculta pero sigue en el DOM</div>```

Resumen:
- Usa v-if para condicionalmente agregar o eliminar un componente del DOM.
- Usa v-show cuando solo necesites ocultar el componente sin eliminarlo del DOM.
- Usa v-else y v-else-if para encadenar condiciones.

Question 19

¿Qué es el HMR (Hot Module Replacement) y cómo se activa en Vue?

Answer 19

El HMR es una característica de Webpack que permite reemplazar módulos en el navegador sin tener que recargar toda la página. Esto mejora la productividad al permitir que los cambios en el código se reflejen inmediatamente sin perder el estado de la aplicación.

¿Cómo se activa en Vue?
1. Por defecto, en Vue CLI:
Si usas Vue CLI para crear tu proyecto, HMR está habilitado automáticamente durante el desarrollo.
- Solo necesitas iniciar el servidor de desarrollo con npm run serve.
- Vue CLI se encarga de la configuración de Webpack y activa HMR de manera predeterminada.

2. En proyectos personalizados con Webpack:
   Si configuras Webpack manualmente, necesitas agregar y configurar el plugin webpack-dev-server con la opción hot: true.

   javascript
   // webpack.config.js
   module.exports = {
     devServer: {
       hot: true,  // Habilita HMR
     }
   };

Resumen:
- HMR permite actualizar partes del código sin recargar toda la página.
- En Vue, si usas Vue CLI, HMR está habilitado por defecto durante el desarrollo.
- En proyectos personalizados, habilítalo con hot: true en Webpack.