Cómo utilizar VUE para reducir el número de solicitudes al servidor
A continuación se utiliza el método keep-alive proporcionado por vue para ver cómo reducir el número de solicitudes al servidor.
VUE2.0 proporciona un método keep-alive que se puede utilizar para componentes de caché que se deben evitar Cargue los componentes correspondientes varias veces para reducir el consumo de rendimiento. Por ejemplo, si una página carga imágenes, texto, etc., y el usuario salta a otra interfaz después de hacer clic en ella, habrá un retorno cuando el usuario regrese a otra interfaz. El usuario hace clic desde otra interfaz para regresar a la interfaz original. Si no se establece esto, se debe solicitar nuevamente al servidor la información de la interfaz original. A través del keep-alive proporcionado por vue, los datos solicitados se pueden guardar, reduciendo así la cantidad de solicitudes y mejorando la experiencia del usuario.
Hay dos tipos de componentes de almacenamiento en caché, uno es almacenar en caché toda la página del sitio web y el otro es almacenar en caché parte de la página.
1. Almacenar en caché todas las páginas, con una solicitud para cada página. El método es el siguiente: encapsúlelo con la etiqueta keep-alive en la vista del enrutador que debe almacenarse en caché.
lt;keep-alivegt;
lt;router-viewgt; lt;/router-viewgt;
lt;/keep-alivegt; se escribe en el gancho creado y se almacenará en caché. Por ejemplo, vaya de una página de lista a una página de detalles y luego regrese a la misma página.
2. Para almacenar en caché algunos componentes o páginas, utilice router.meta. Este atributo se puede implementar mediante juicio. El método es el siguiente:
lt;keep-alive v-if="$route.meta.keepAlive"gt;
lt;router-viewgt;lt;/router- viewgt;
lt;/keep-alivegt.
lt;router-view v-if="!$route.meta.keepAlive"gt;/router-viewgt; La configuración del enrutador es la siguiente:
enrutadores: [
{ ruta: '/home',
nombre: inicio,
meta: { keepAlive: true }// Establecer en verdadero para indicar que se requiere el almacenamiento en caché, no establecer o establecer en falso para indicar que no se requiere el almacenamiento en caché}
] También puede usar el nuevo atributo include/ excluir para configurarlo. Como sugiere el nombre, incluir significa incluir y excluir significa excluir. Aquí el nombre debe establecerse utilizando el nombre del componente, por lo que se debe agregar el nombre. Agregar los componentes a y b requiere almacenamiento en caché, mientras que los componentes cyd no requieren almacenamiento en caché.
El método de escritura específico es el siguiente:
lt; keep-alive include="a, b"gt;
lt;componentgt; p> lt; /keep-alivegt;
lt;keep-alive excluir="c,d"gt;
lt;componentgt;lt;/componentgt;
lt ;/keep-alivegt; La optimización de los proyectos de Vue también se puede lograr cargando componentes bajo demanda, al igual que cargar imágenes de forma diferida en el lado del cliente si el cliente no puede ver las imágenes en absoluto y cargamos todas. imágenes al abrir la página, esto aumentará drásticamente los tiempos de solicitud y degradará la experiencia del usuario. La carga diferida es muy útil en muchos sitios web, como sitios web de compras como Taobao y JD.com. Hay muchos enlaces de imágenes en ellos. Si se desplaza hacia abajo rápidamente, es posible que vea que las imágenes se cargan.
Suplemento:
Notas sobre cómo habilitar keep-alive en el enrutamiento de Vue
Esto no es un requisito comercial, pero dado que el DOM se debe volver a representar cada vez que se ingresa a la página y luego obtener los datos para actualizar el DOM. Sentí que, como ingeniero de front-end, tenía la necesidad de optimizar la lógica de carga. Vue proporcionó la función de mantener vivo. es un intento. Por supuesto, nada será fácil y los baches y baches en el camino son inevitables, por lo que registraré los problemas encontrados aquí y espero que sea útil para las personas que lean este artículo. PD: No es tan difícil.
Parte HTML:
lt;templategt;
lt;p class="app"gt;
lt;keep-alivegt ;
lt;router-viewgt;lt;/router-viewgt;
lt;/keep-alivegt;
lt;/pgt;
lt;/templategt; parte de JavaScript:
.....
creado: función () {
console.log(1)
},
montado: función () {
console.log(2)
},
activada. función () {
consola.log(3)
},
desactivada: función () {
consola .log(4)
}.... .1. Qué etapas de obtención de datos
Los enlaces del ciclo de vida de la página son como se muestra en el código anterior. Estas cuatro partes son las más. pieza de uso común. Lo que debe tenerse en cuenta en esta parte es que después de introducir keep-alive, al ingresar a la página por primera vez, el gancho se activará en el orden de creado-gt montado-gt y desactivado al salir; Al ingresar nuevamente a la página (ya sea para avanzar o retroceder), solo se activará la opción activada.
Sabemos que después de mantener vivo, la plantilla de página se inicializará y analizará en un fragmento HTML por primera vez, y luego no se analizará nuevamente al ingresar a la página nuevamente, sino los datos en se leerá la memoria, es decir, solo cuando los datos cambien, VirtualDOM se utilizará para actualizaciones diferenciales. Por lo tanto, también debería activarse la adquisición de datos de entrada de página. La parte de manipular manualmente el DOM después de descargar los datos también debe ejecutarse en el estado activo para que surta efecto.
Por lo tanto, debe mantener una copia del código de adquisición de datos en activado, o no crear la pieza y transferir directamente el código creado a activado.
2. No se pueden leer los datos de $route
El método de escritura anterior era asignar los datos de $route requeridos a los datos para que otros métodos puedan usarlos, pero use keep-alive Finalmente , los datos deben ingresar a la página y recuperarse activados para lograr el propósito de actualización. Defina un método initData e inícielo en el momento de la activación.
initData: función () {
let _this = this;
_this.fromLocation = JSON.parse(this.$route.query.fromLocation);
_this.toLocation = JSON.parse(this.$route.query.toLocation);
_this.fromLocation = JSON.parse(this.$route.query.fromLocation);
_this.toLocation = JSON.parse(this.$route.query.toLocation);