Optimización del rendimiento del proceso de desarrollo de proyectos de Vue

1. v-if y v-show distinguen escenarios de uso;

v-if es adecuado para escenarios que rara vez cambian las condiciones en tiempo de ejecución y no requieren cambios frecuentes de condiciones; v-show es adecuado para escenarios que requieren cambios muy frecuentes de condiciones

2. Diferenciar escenarios de uso entre computado y reloj

Cuando necesitamos realizar cálculos numéricos y dependemos de otros datos, debemos usar computed, porque podemos aprovechar la función de almacenamiento en caché de computed para evitar volver a calcular cada vez que obtenemos un valor;

El reloj debe usarse cuando necesitamos realizar operaciones asíncronas o costosas cuando los datos cambian, usar la opción de reloj nos permite realizar operaciones asíncronas (acceder a una API), limitar la frecuencia con la que realizamos la operación y esperar hasta obtener el resultado final. establecer el estado intermedio. Estas son todas las cosas que las propiedades calculadas no pueden hacer.

3. El recorrido v-for debe agregar una clave al elemento y evitar usar v-if al mismo tiempo

Cuando los datos de la lista se recorren y representan, es necesario establecer un valor de clave único para cada elemento, de modo que el mecanismo interno de Vue.js pueda encontrar con precisión los datos de la lista. Cuando se actualiza el estado, el valor del estado nuevo se compara con el valor del estado anterior para localizar la diferencia más rápidamente. v-for tiene mayor prioridad que v-if.Si necesita recorrer todo el arreglo cada vez, afectará la velocidad, especialmente cuando necesita renderizar una parte pequeña, debe reemplazarse con la propiedad calculada si es necesario.

4. Optimización del rendimiento de la lista larga

A veces, nuestros componentes son puramente visualización de datos y no habrá cambios. Para reducir el tiempo de inicialización de los componentes, se puede congelar un objeto mediante el método Object.freeze. Una vez que el objeto congelado ya no se puede modificar.

exportar predeterminado { datos: () => ({ usuarios: {} }), asíncrono creado () { const usuarios = esperar axios.get("/api/users"); this.users = Object.freeze(usuarios); } };

5. Destrucción de eventos

El uso de addEventListene y otros métodos en js no se destruirá automáticamente. Necesitamos eliminar manualmente los oyentes de estos eventos cuando se destruya el componente para evitar pérdidas de memoria, como:

created() { addEventListener('click', this.click, false) }, beforeDestroy() { removeEventListener('click', this.click, false) }

6. Lazy loading de recursos de imagen

Use el complemento vue-lazyload de Vue:

1. Instala el complemento

npm install vue-lazyload --save-dev      
复制代码

2. Introducir y usar en main.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)          
复制代码

3. Personaliza las opciones de uso (opcional)

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
复制代码

4. Usar (cambiar el atributo src de la etiqueta img directamente a v-lazy)

<img v-lazy="/static/img/1.png">              
复制代码

7. Enrutamiento de carga diferida

Es más eficiente dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código y luego cargar los componentes correspondientes cuando se accede a la ruta. Esto aumentará la velocidad de la pantalla por encima del pliegue.

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
复制代码

8. Introducción a pedido de complementos de terceros

Con la ayuda de babel-plugin-component, solo se pueden introducir los componentes necesarios para lograr el propósito de reducir el tamaño del proyecto.

1. Instale el componente babel-plugin

npm install babel-plugin-component -D
复制代码

2. Modificar .babelrc

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
复制代码

3. Introducir algunos componentes en main.js

import Vue from 'vue';
import { Button, Select } from 'element-ui';

 Vue.use(Button)
 Vue.use(Select)
复制代码

9. Optimizar el rendimiento de la lista infinita

Consulte los proyectos de código abierto vue-virtual-scroll-list y vue-virtual-scroller para optimizar este escenario de lista infinita;

---