Aquí hay una traducción gratuita del artículo " 10 consejos y trucos para que sea un mejor desarrollador de VueJS" de Dev.to. El autor nos informará sobre opciones interesantes y útiles para usar las herramientas habituales de VueJS.
Introduccion
Realmente disfruto trabajando con VueJS y cada vez que hago esto, profundizo en sus capacidades y características. En este artículo, le presento 10 consejos y trucos geniales que probablemente no conocía e intentaré ayudarlo a convertirse en el mejor desarrollador de VueJS.
Hagamos que la sintaxis de las tragamonedas sea hermosa
Con el lanzamiento de Vue 2.6, las abreviaturas para las ranuras estuvieron disponibles, que pueden usarse como eventos (por ejemplo, la abreviatura @click para v-on:click ) o dos puntos para el enlace de datos ( :src ). Si tiene, por ejemplo, un componente de tabla, puede usar la siguiente función :
<template> ... <my-table> <template #row="{ item }"> /* some content here. You can freely use 'item' here */ </template> </my-table> ... </template>
$ on ('gancho:')
Esta es una característica genial que puede usar si necesita definir un detector de eventos personalizado o un complemento de terceros en los ganchos created o mounted y necesita eliminarlo en el gancho beforeDestroy para evitar pérdidas de memoria. Usando $on('hook:') puede definir o eliminar un evento en un solo gancho.
mounted() { const aThirdPartyPlugin = aThirdPartyPlugin() this.$on('hook:beforeDestroy', () => { aThirdPartyPlugin.destroy() }) }
Accesorios de validación
Quizás ya sepa que es posible validar sus accesorios con valores primitivos, como String , Number u Object . Pero también puede crear un validador personalizado, por ejemplo, para verificar una serie de cadenas:
alertType: { validator: value => ['signup', 'login', 'logout'].includes(value) }
Argumentos de directivas dinámicas
Una de las características más interesantes de VueJS 2.6 es la capacidad de determinar dinámicamente argumentos de directivas de componentes. Suponga que tiene un componente de botón y desea escuchar el evento Click bajo ciertas condiciones, y el evento DoubleClick en todos los demás casos. Aquí hay un caso en el que tal directiva podría ser útil:
<template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script>
Y lo que es realmente genial: ¡esto es que puedes aplicar esta plantilla a atributos HTML dinámicos, accesorios y mucho más!
Reutilizando componentes para rutas similares
A veces tiene diferentes rutas que usan algún conjunto de componentes. Si cambia entre dichas rutas, de manera predeterminada, el componente común no se volverá a dibujar, porque Vue reutilizará este componente para un mejor rendimiento. Pero si desea volver a dibujar estos componentes, puede definir la propiedad :key en Router-View-Component :
<template> <router-view :key="$route.fullPath"></router-view> </template>
Pase todos los accesorios del componente principal al secundario
Esta es una característica realmente genial para pasar todos los accesorios del componente principal al componente secundario. Este método es conveniente si, por ejemplo, utiliza el componente contenedor. Por lo tanto, en lugar de pasar todas las propiedades en secuencia, solo necesita pasarlas todas a la vez:
<template> <childComponent v-bind="$props"/> </template>
En cambio:
<template> <childComponent :prop1="prop1" :prop2="prop2" :prop3="prop3" :prop4="prop4" ... /> </template>
Pase todos los oyentes de eventos del componente principal al secundario
Si tiene un componente hijo que no es raíz para el componente padre, puede pasar todos los oyentes de eventos de padres a hijos de esta manera:
<template> <div> ... <childComponent v-on="$listeners"/> ... </div> </template>
Si el componente hijo está en la raíz del padre, no necesitará ese truco y todos los eventos estarán disponibles de forma predeterminada.
$ createElement
Cada instancia de Vue tiene acceso por defecto al $createElement , que crea y devuelve nodos virtuales. Esto se puede usar, por ejemplo, para usar marcado en métodos que se pueden pasar a la directiva v-html . En componentes funcionales, este método está disponible como primer argumento para la función de render .
Usando JSX
A partir de Vue CLI 3 , la compatibilidad con JSX apareció de forma predeterminada. Ahora puede escribir su código usando JSX (por ejemplo, si se siente más cómodo después de la reacción), también puede ser más conveniente, por ejemplo, para escribir componentes funcionales. Si aún no está utilizando Vue CLI 3 , puede usar babel-plugin-transform-vue-jsx para admitir JSX en su proyecto.
Modelo v personalizado
Por defecto, v-model es lo que llamamos azúcar sintáctica sobre @input y :value eventos de :value . Pero puede especificar la propiedad del model en su componente Vue y determinar qué evento y accesorios se utilizarán:
export default: { model: { event: 'change', prop: 'checked' } }
Conclusión
Espero haber podido darte algunos consejos para ayudarte a convertirte en el mejor desarrollador de VueJS.