vue项目优化之通过keep-alive数据缓存的方法

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

prop:

  1. include: 字符串或正则表达式。只有匹配的组件会被缓存。
  2. exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

通过vue提供的keep-alive减少对服务器的请求次数

VUE2.0中提供了一个keep-alive方法，可以用来缓存组件，避免多次加载相应的组件，减少性能的消耗。比如， 一个页面的数据包括图片、文字等用户都已经加载完了，然后用户通过点击跳转到了另外一个界面。然后从另外一个界面通过返回又回到了原先的界面。如果没有设置的话，那么原先界面的信息就要重新向服务器请求得到。而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存，减少请求的次数，提高用户的体验程度。

缓存组件又分为两种，缓存整个站点的页面的组件或者缓存部分页面的组件。

1、缓存所有的页面,适用于每个页面都有请求的情况。方法如下，在需要缓存的router-view用keep-alive标签进行包裹起来。

<keep-alive>
<router-view></router-view>
</keep-alive>

将首次触发请求写到created钩子里边，就能实现缓存。比如从列表页，去了详情页，回来还是原来的页面。

2、缓存部分组件或者页面，使用router.meta这个属性通过判断的方法可以实现。方法如下：

<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="! $route.meta.keepAlive">
</router-view>

router设置如下：

 routers:[
      {  path: '/home',
        name: home,
        meta:{keepAlive: true}   // 设置为true表示需要缓存，不设置或者false表示不需要缓存                    }
     ]

还可以通过新增的属性include/exclude来设置。见名思意，include包含的意思，exclude除了的意思。这里需要用到组件的名称即name来进行设置，所以name肯定就要加上了。  加入 a,b组件需要缓存，c,d组件不需要缓存。写法如下：

<keep-alive include="a,b">
<component></component>
</keep-alive>
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

vue项目的优化还可以通过组件的按需加载来实现，就像图片的懒加载一样，如果客户根本就没有看到那些图片，而我们却在打开页面的时候全部给加载完了，这样会大大的增加请求的时间，降低用户的体验程度。懒加载在很多的网站都有用到，比如淘宝、京东等等这样的购物网站，上面的图片链接等等都很多，如果你把滚轴迅速的往下拉的时候，你可能会看到图片加载的情况。具体怎么使用，大家可以看另一篇文章: vue项目优化之页面的按需加载(vue+webpack)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈 Vue 项目优化的方法

    好久不写博文了,本文作为我使用半年 vue 框架的经验小结,随便谈谈,且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目. 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style&

  • 详解vue项目首页加载速度优化

    详解vue项目首页加载速度优化

    凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题.接下来我就我们项目里的一些实践来做一下总结.希望抛砖引玉,如果各位有更好的方案,不吝赐教. 1: 针对第三方js库的优化 我们项目里用到的第三方js库主要有:vue, vue-router, vuex, axio, 我们还用到了qiniu.大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面,如果这些你的第三方依赖库很多,很大的话,那就会导致vender这个文件很大,那首屏加载的速度肯定会被拖

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    详解vue项目优化之按需加载组件-使用webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm

  • 详解基于 axios 的 Vue 项目 http 请求优化

    对于需要大量使用 http 请求的项目,我们通常会选择对 http 请求的方法进行二次封装,以便增加统一的拦截器,或者统一处理阻止重复提交之类的逻辑.Vue.js 的项目中我们选择使用了 axios 这样一个 http 库,下面也就简述下基于 axios 做的简单二次封装 依赖 首先引入 axios ,对于 ie9 这样不支持 promise 的浏览器还需引入 es6-promise 模块 require('es6-promise').polyfill(); var axios = requir

  • vue项目优化之通过keep-alive数据缓存的方法

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓

  • Vue项目优化的一些实战策略

    Vue项目优化的一些实战策略

    Vue项目完成后就要从开发环境转成生产环境 一些第三方的包体积过大,导致生成js文件过于庞大,这是时候可以生成打包报告来查看项目中的问题 1.生成报告有两种方式,一种使用npm run build --report 2.另一种使用vue脚手架的ui可视化面板,在项目中输入vue ui 3.点击生产环境下的运行按钮,可以看到打包出来的js文件一共有2M之多,js/chunk-vendors.js就是一些项目依赖文件, 再右侧可以看到element-ui 和echarts 以及富文本编辑器,树状表格

  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

    项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

  • Vue项目优化打包之前端必备加分项

    Vue项目优化打包之前端必备加分项

    目录 前言 一.路由懒加载 1. 为什么需要路由懒加载 2. 如何实现路由懒加载 3. 路由懒加载中的魔法注释 二.分析包大小 1. 需求 2. 如何生成打包分析文件 三.webpack配置排除打包 1. 需求 2. 排除打包 四. 引用网络资源 1. 需求 2. CDN 3. 实现步骤 五. 打包去除console.log 1. 需求 2. 代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优

  • 一次vue项目优化的实际操作记录

    一次vue项目优化的实际操作记录

    目录 前言 一.CDN引入 二.gzip压缩 三.路由懒加载,这种最简单的了就不多说了 四.打包不生成map文件 五.router上面使用props传参数,导致页面加载时间很长 总结 前言 项目前端优化是我们经常需要去做的事情,今天我们就来记录下我的实际操作. 一.CDN引入 这是一个常态化的操作了,主要是让我们通过npm下载依赖包和import引入的文件,变成线上使用,减少打包后的文件大小.比如常用的vue.ElementUI.vuex.vue-router.axios等等一些常用的 首先在i

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

  • vue项目中使用bpmn为节点添加颜色的方法

    内容概述 bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方式1:modeling.setColo

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

    本文实例讲述了vue自定义键盘信息.监听数据变化的方法.分享给大家供大家参考,具体如下: @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show&quo

随机推荐