Mejora de la aplicación Vue.js. Algunos consejos prácticos

 

   (( item.name ))
 

...y veremos un error como este :

Podemos hacerle frente utilizando JSX y un componente funcional, también debemos pasar un booleano y reemplazará al v-if.

</>

No escriba manejadores de llamadas api en componentes

En realidad, este es sólo uno de los ejemplos de lo que no se debe hacer en los componentes. Simplemente haz lo que sea localmente necesario en la lógica de los componentes. Cada método que podría ser externo debe ser separado y sólo se llama en los componentes, por ejemplo, la lógica de negocio.

Por ejemplo:

En lugar de un método como este:

creado() (
this.fetchArticles();
),
métodos: (
 async fetchArticles() (
  try (
    const datos = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // manejar error
    )
  )
)

Escribe algo como esto - sólo llama al método apropiado que devolverá los resultados de la API:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // manejar error
   )
  )

Utilizar ranuras en lugar de grandes cantidades de accesorios

A veces usar props es suficiente, pero también hay casos en los que no son eficientes. Puede ocurrir en situaciones en las que tendríamos que añadir demasiados props para que el componente funcione como queremos. El ejemplo más sencillo podría ser un componente botón. Sin duda, es un componente que se puede utilizar en cualquier parte de una aplicación. Así que, consideremos un componente botón como este.

(( texto ))

En esta etapa, es un simple componente que sólo acepta texto prop. Bien, pero puede no ser suficiente ya que necesitaremos iconos en el botón. En este caso, tenemos que añadir otros 2 props (2, porque queremos tener la opción de añadir antes o después del texto). Así, el componente se verá así:

(( texto ))

No está mal, sólo tenemos 3 puntales, pero...

¿Y si necesitamos un indicador de carga? Pues tendríamos que añadir otro accesorio. ¡Y eso para cada nueva función! ¿Le parece un reto mantener el ritmo de crecimiento del número de componentes? Sí, sin duda.

Utilicemos ranuras en su lugar.

Más sencillo, ¿verdad? Vale, pero ¿cómo podemos conseguir la función de añadir iconos? Es muy fácil. Sólo tienes que utilizar el componente de esta manera:

Volver

Siguiente

Una forma sencilla de mejorar el rendimiento

Voy a compartir contigo algunos consejos que son realmente fáciles de poner en práctica, para que puedas beneficiarte al instante.

Rutas de carga perezosa

A veces tenemos rutas que sólo están disponibles para los administradores, o usuarios con un acceso particular, que también pueden ser menos visitadas que otras. Son casos perfectos para usar la ruta lazy load.

Sólo tiene que utilizar la función de flecha en la propiedad de su componente para devolver la función de importación:

 export default new VueRouter (
   (
     modo: 'historia
     rutas: [
       (
         ruta: '/aterrizaje',
         component: () => import('../pages/p-welcome'),
         nombre: 'welcome'
       ),
  ...

En lugar de:

import PWelcome from '@/pages/p-welcome';

export default nuevo VueRouter (
(
modo: 'historia
rutas: [
(
ruta: '/aterrizaje',
componente: PWelcome, //componente importado
nombre: 'welcome
),

Carga lenta de componentes Vue

Una situación similar puede ocurrir con Componentes Vue. Podemos importar perezosamente componentes de un solo archivo de esta manera:

const lazyComponent = () => import('rutaAComponente.vue')
exportar por defecto (
componentes: (lazyComponent )
)

// Otra sintaxis
export default (
componentes: (
lazyComponent: () => import('rutaAComponente.vue')
)
)

Gracias a la carga perezosa de ese componente, se descargará sólo cuando se solicite. Por ejemplo, si tenemos un componente con v-if, sólo se solicitará si el componente se va a renderizar. Así que a menos que el valor v-if sea verdadero, el componente no será cargado. Es por eso que la importación perezosa también se puede utilizar para JavaScript archivos.

Bonificación: Cuando se utiliza Vue CLI 3+, todos los recursos cargados perezosamente se precargan por defecto.

Utilizar envoltorios transparentes en lugar de atributos

Considere un componente como éste:

Sin problemas, podemos usarlo así:

o

Funciona porque Vue le permite pasar atributos html al componente, aunque no los haya declarado como props. Los atributos html se aplican al elemento raíz del componente (input, en este caso).

El problema aparece cuando queremos ampliar nuestro componente de entrada, ya que podría tener este aspecto:

<code> <template>
   <div class="form-group">
     <label :for="id">(( etiqueta ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>

Ahora, usando el componente de esta manera:

no funcionará como queremos, porque el tipo y el marcador de posición se aplicarán a div (elemento raíz) y eso no tiene sentido. Por lo tanto, tenemos que tratar con él, porque queremos añadir nuestros atributos al elemento de entrada. Tu primer pensamiento puede ser "¡añadamos los atributos que necesitamos!" y por supuesto que funcionará, pero... ¿qué pasa si queremos usar tipo, autocompletar, marcador de posición, autofocus, desactivado, inputmodeetc., entonces tenemos que definir los props para cada atributo html. Personalmente no me gusta este método tan largo, ¡así que busquemos algo mejor!

Podemos tratar todo el problema en sólo dos líneas.

<template>
  <div class="form-group">
    <label :for="id">(( etiqueta ))</label>
    <!-- pay attention to v-bind="$attrs" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false, // <- pay attention to this line
  props: ['value', 'label', 'id']
);
</script>

Podemos utilizar v-bind="$attrs" y pasar atributos directamente a <input> sin declarar grandes cantidades de accesorios. Además, recuerde sobre la adición de la opción heredarAttrs: false para deshabilitar el paso de los atributos al elemento raíz. Vayamos un poco más allá: ¿qué pasa si necesitamos añadir escuchadores de eventos a esta entrada? De nuevo, podría ser manejado por props o eventos personalizados, pero hay una solución mejor.

<template>
  <div class="form-group">
    <label :for="id">(( etiqueta ))</label>
    <!-- pay attention to v-on="listeners" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      v-on="listeners"
    >
</div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false,
  props: ['value', 'label', 'id'],
  computed: (
    listeners() (
      return (
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      );
    )
  )
);
</script>

Hay una nueva propiedad computada que devuelve el componente para los oyentes y añade el oyente de entrada. Usamos esa entrada computada simplemente escribiendo v-on="oyentes".

Utilizar el observador con la opción inmediata en lugar del gancho creado y el observador juntos

A menudo obtenemos algunos datos en un hook creado (o montado), pero luego necesitamos obtener esos datos con cada cambio de una propiedad, por ejemplo, la página actual de la paginación. Algunos tienden a escribirlo así

<script>
export default (
  name: 'SomeComponent',
  watch: (
    someWatchedProperty() (
      this.fetchData();
    )
  ),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

Por supuesto, funciona, pero... No es el mejor enfoque, ni siquiera uno bueno. Por lo tanto, vamos a ver cómo podemos refactorizar esto, Un ejemplo de no tan mal enfoque:

<script>
export default (
name: 'SomeComponent',
watch: (
  someWatchedProperty: 'fetchData'
),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

La versión anterior es mejor porque otro método no es necesario, sólo nombramos un método que debe ser llamado para cambiar watchedProperty.

Un enfoque aún mejor:

<script>
  export default (
    name: 'SomeComponent',
    watch: (
      someWatchedProperty: (
        handler: 'fetchData',
        immediate: true
      )
    ),
    methods: (
      fetchData() (
        // handle fetch data
      )
    )
  );
</script>

Nos deshacemos del gancho created. Al añadir la opción 'immediate', hacemos que ese componente llame al método fetchData inmediatamente después del inicio de la observación (es un poco antes del gancho created y después de beforeCreated), por lo que se puede utilizar en lugar del gancho created.

Vue.js consejos resumen

Estos consejos no harán que su solicitud sea perfecta, pero si los utiliza, lo hará rápidamente. mejore la calidad de su código. Además, espero que encuentre algo de interés en los ejemplos anteriores.

Tenga en cuenta que algunos de ellos se han simplificado para los fines del artículo.

Más información:

JavaScript está totalmente muerto. Un tipo en Internet

Una mirada más profunda a los ganchos React más populares

Proyectos de software en los que puede utilizar JavaScript