Teorico Tecnica Flashcards
Componentes con lógica duplicada??
Problema: Componentes con lógica duplicada.
Solución: Abstraer lógica compartida en mixins o composables (si usaste Composition API con Vue 2.7), siguiendo el principio DRY (Don’t Repeat Yourself).
Gestión del estado en aplicaciones grandes
Problema: Gestión del estado en aplicaciones grandes.
Solución: Usar Vuex para centralizar el estado y establecer módulos bien definidos siguiendo el principio de responsabilidad única (Single Responsibility Principle).
¿Cómo aplicaste los principios SOLID en Vue?
Single Responsibility Principle (SRP): Cada componente solo maneja una parte específica de la UI o lógica de negocio.
Open/Closed Principle (OCP): Utilizar slots o props para hacer componentes extensibles sin necesidad de modificarlos.
Dependency Inversion Principle (DIP): Usar inyección de dependencias para servicios como API o lógica de negocio, desacoplando el código del framework.
¿Qué retos enfrentaste al trabajar con TypeScript en Vue?
Problema: Tipar correctamente los props y eventos emitidos por los componentes.
Solución: Usar PropType y definir interfaces claras para eventos con defineComponent.
Para usarla en Vue 2, necesitas instalar el paquete @vue/composition-api, que agrega soporte para la API de composición en Vue 2.
Una vez configurado, puedes usar defineComponent para crear componentes con tipado en TypeScript. Esto mejora la experiencia del desarrollador al trabajar con tipos explícitos.
¿Cómo aseguraste la calidad del código?
Respuesta: Usé herramientas como ESLint para linting, Prettier para formateo y Jest para pruebas unitarias. También promoví revisiones de código (code reviews) en el equipo.
¿Cómo manejaste problemas de rendimiento en Vue?
Optimizaciones como** dividir el código (code splitting) y usar la directiva v-once**para componentes estáticos.
Minimicé el re-renderizado usando **lclaves únicas (key) y seguimiento eficiente del estado. **
PropType
Es una utilidad que proporciona Vue junto con TypeScript para definir y validar el tipo de las props de un componente en Vue 2 o Vue 3. Cuando usas TypeScript en tus proyectos de Vue, puedes declarar explícitamente qué tipo de datos esperas recibir como props en un componente, lo que ayuda a prevenir errores y mejorar la legibilidad del código.
props: { title: { type: String as PropType<string>, // Define que esta prop debe ser un string. required: true, // Es obligatorio. },
vee-validate
valida forms en vue 3