Errores comunes que se deben evitar al trabajar con Vue.js

Buscando un framework front-end para probar, comencé con React y luego probé Vue.js.

Desafortunadamente , encontré muchos problemas con Vue.js al principio. En este artículo, me gustaría compartir algunos problemas comunes con los que puede tener que lidiar al trabajar con Vue.js. Algunos de estos problemas pueden parecer obvios, pero pensé que compartir mi experiencia podría ayudar a alguien.

Incluir compilador de plantillas

Mi primer problema fue bastante básico. Lo primero que debe hacer para usar Vue.js es importarlo. Si sigue la guía oficial y utiliza una plantilla en línea para su componente, obtendrá una página en blanco.

import Vue from 'vue'; var vm = new Vue({ el: '#vm', template: ' Hello World ', });

Tenga en cuenta que este problema no ocurre cuando define plantillas con la función de renderizado o SFC (componente de archivo único).

De hecho, hay muchas versiones de Vue. La compilación predeterminada exportada por el paquete NPM es la compilación solo en tiempo de ejecución . No trae el compilador de plantillas.

Para obtener información general, el compilador de plantillas funciona exactamente como JSX para React. Reemplaza cadenas de plantillas con llamadas a funciones para crear un nodo DOM virtual.

// #1: import full build in JavaScript file import Vue from 'vue/dist/vue.js'; // OR #2: make an alias in webpack configuration config.resolve: { alias: { vue: 'vue/dist/vue.js' } } // OR #3: use render function directly var vm = new Vue({ el: '#vm', render: function(createElement) { return createElement('div', 'Hello world'); } });

Con los SFC, este problema no ocurre. Tanto vue-loader como vueify son herramientas que se utilizan para manejar SFC. Generan componentes de JavaScript simples utilizando la función de renderizado para definir la plantilla.

Para usar plantillas de cadenas en componentes, use una compilación completa de Vue.js.

En resumen, para solucionar este problema, especifique la compilación correcta durante la importación o cree un alias para Vue en la configuración de su paquete.

Debe tener en cuenta que el uso de plantillas de cadenas reduce el rendimiento de su aplicación, porque la compilación se produce en tiempo de ejecución.

Hay muchas más formas de definir una plantilla de componente, así que consulte este artículo. Además, recomiendo usar la función de renderizado en la instancia de Vue.

Mantener la reactividad de la propiedad

Si usa React, probablemente sepa que su reactividad se basa en llamar a la setStatefunción para actualizar el valor de las propiedades.

La reactividad con Vue.js es un poco diferente. Se basa en el proxy de las propiedades del componente. Las funciones getter y setter se anularán y notificarán las actualizaciones al DOM virtual.

var vm = new Vue({ el: '#vm', template: ` {{ item.count }} `, data: { item: {} }, beforeMount () { this.$data.item.count = 0; }, methods: { updateCount () { // JavaScript object is updated but // the component template is not rendered again this.$data.item.count++; } } });

En el fragmento de código anterior, la instancia de Vue tiene una propiedad llamada item(definida en datos). Esta propiedad contiene un objeto literal vacío.

Durante la inicialización del componente, Vue crea un proxy bajo las funciones gety setadjuntas a la itempropiedad. Por lo tanto, el marco observará los cambios de valor y eventualmente reaccionará.

Sin embargo, la countpropiedad no es reactiva porque no se declaró en el momento de la inicialización.

En realidad, la proxificación solo ocurre en el momento de la inicialización del componente y la beforeMountfunción del ciclo de vida se activa más tarde.

Además, el itemcolocador no se llama durante la countdefinición. Por lo tanto, el proxy no se activará y la countpropiedad no tendrá vigilancia.

beforeMount () { // #1: Call parent setter // item setter is called so proxifying is propaged this.$data.item = { count: 0 }; // OR #2: explicitly ask for watching // item.count got its getter and setter proxyfied this.$set(this.$data.item, 'count', 0); // "Short-hand" for: Vue.set(this.$data.item, 'count', 0); }

Si mantiene la item.countafectación beforeMount, llamar Vue.setmás tarde no creará un reloj.

El mismo problema exacto también ocurre con las matrices cuando se usa el afecto directo en índices desconocidos. En tales casos, debe preferir funciones proxy de matriz como pushy slice.

Además, puede leer este artículo en el sitio web del desarrollador de Vue.js.

Tenga cuidado con las exportaciones SFC

Puede usar Vue regularmente en archivos JavaScript, pero también puede usar componentes de un solo archivo. Ayuda a recopilar código JavaScript, HTML y CSS en un solo archivo.

Con los SFC, el código del componente es la etiqueta de script de un .vuearchivo. Aún escrito en JavaScript, tiene que exportar el componente.

Hay muchas formas de exportar una variable / componente. A menudo, utilizamos exportaciones directas, con nombre o predeterminadas. Las exportaciones con nombre evitarán que los usuarios cambien el nombre del componente. También será elegible para sacudir árboles.

/* File: user.vue */ {{ user.name }} const User = { data: () => ({ user: { name: 'John Doe' } }) }; export User; // Not work export default User; // Works  /* File: app.js */ import {User} from 'user.vue'; // Not work import User from 'user.vue'; // Works (".vue" is required)

El uso de exportaciones con nombre no es compatible con SFC, ¡tenga esto en cuenta!

En resumen, exportar una variable con nombre de forma predeterminada puede ser una buena idea. De esta forma, obtendrá mensajes de depuración más explícitos.

No mezcle componentes SFC

Poner código, plantilla y estilo juntos es una buena idea. Además, dependiendo de sus limitaciones y opiniones, es posible que desee mantener la separación de preocupaciones.

Como se describe en la documentación de Vue, es compatible con SFC.

Después, se me ocurrió una idea. Utilice el mismo código JavaScript e inclúyalo en diferentes plantillas. Puede señalarlo como una mala práctica, pero mantiene las cosas simples.

Por ejemplo, un componente puede tener modo de solo lectura y lectura-escritura y mantener la misma implementación.

/* File: user.js */ const User = { data: () => ({ user: { name: 'John Doe' } }) }; export default User; /* File: user-read-only.vue */ {{ user.name }} /* File: user-read-write.vue */  

En este fragmento, tanto las plantillas de solo lectura como las de lectura y escritura utilizan el mismo componente de usuario de JavaScript.

Una vez que importe ambos componentes, se dará cuenta de que no funciona como se esperaba.

// The last import wins import UserReadWrite from './user-read-write.vue'; import UserReadOnly from './user-read-only.vue'; Vue.component('UserReadOnly', UserReadOnly); Vue.component('UserReadWrite', UserReadWrite); // Renders two times a UserReadOnly var vm = new Vue({ el: '#vm', template: ` ` });

El componente definido enuser.jssolo se puede utilizar en un único SFC. De lo contrario, el último SFC importado que lo utiliza anulará al anterior.

Los SFC permiten dividir el código en archivos separados. Pero no puede importar esos archivos en varios componentes de Vue.

Para simplificarlo, no reutilice el código del componente JavaScript en varios componentes SFC. La función de código independiente es una sintaxis útil, no un patrón de diseño.

Gracias por leer, espero que mi experiencia te haya sido útil para que evites los errores que cometí.

Si fue útil, haga clic en ? un par de veces para que otros encuentren el artículo y muestren su apoyo. ?

¿No olvides seguirme para recibir notificaciones sobre mis próximos artículos ?

Mira mis otros artículos

➥ JavaScript

  • How to Improve Your JavaScript Skills by Writing Your Own Web Development Framework ?
  • Stop Painful JavaScript Debug and Embrace Intellij with Source Map

➥ React for beginners series

  • Begin with the first article
  • Get the best practices guide