Vue项目中keepAlive的使用说明(超级实用版)

目录
  • keepAlive的使用
    • 一共有三个步骤
  • keepAlive的注意事项
    • 问题描述
    • 原因
    • include and exclude
    • max

keepAlive的使用

在开发的过程中如果碰到经常浏览需要缓存的页面，而且页面很长需要记录滚动的位置这时就需要用到keepAlive。

一共有三个步骤

1、首先在路由中的mate属性中记录keepAlive，如果需要缓存则置为true。

path:'/index',
name:''index',
component:()=>import('../../index/index'),
meta:{keepAlive:true}

2、在创建router实例的时候加上scrollBehavior方法（keepAlive才会生效）。

let router=new Router({
    mode:"hash",//1、hash哈希：有#号。2、history历史：没有#号
    base:process.env.BASE_URL, //自动获取根目录路径
    scrollBehavior:(to,from,position)=>{
        if(position){
            return position
        }else{
            return {x:0,y:0}
        }
    },

3、需要缓存的router-view包上keep-alive（要有两个router-view，一个是缓存的时候显示，一个是不缓存的时候显示，有的时候不需要缓存）。

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

注意

在keep-alive中的组件会有两个生命周期的钩子函数，activated和deactivated，其中activated是在组件第一次渲染时会被调用，而且之后每次缓存组件被激活都会被调用。所以一般使用时需要里面的代码和created函数中的代码一样即可。

keepAlive的注意事项

问题描述

今天在测试提到了一个bug，当重复进入相同的组建的时候，mounted和created内的方法不触发，导致页面展示不一样

原因

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

当组件在 <keep-alive> 内被切换，它的 activated （激活）和 deactivated （不激活）这两个生命周期钩子函数将会被对应执行。

include and exclude

include （缓存的文件）和 exclude（不换存文件） 属性允许组件有条件地缓存。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
 
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

max

最多可以缓存多少组件实例。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue前端开发keepAlive使用详解

    vue前端开发keepAlive使用详解

    目录 前言 keep-avlive钩子函数 keep-avlive缓存哪些组件 小结及注意事项 前言 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性.使用方式为 <keep-alive> <component /> </keep-alive> 这里的component会被缓存. keep-avlive钩子函数 被包含

  • vue之keepAlive使用案例详解

    在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态:vue里提供了keep-alive组件用来缓存状态. 可以用以下几种方案解决问题: 一.利用meta标签 1.首先在路由中的meta标签中记录keepAlive的属性为true path: '/classify', name: 'classify', component: () => import('@/views/classify/classify.vue'), m

  • vue keepAlive缓存清除问题案例详解

    vue keepAlive缓存清除问题案例详解

    vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <router-view /> </keep-alive> <keep-alive v-else> <router-view /> </keep-alive> 网上很多都是这种方法,用了这种方

  • 解决Vue中使用keepAlive不缓存问题

    1.查看app.vue文件,这个是重点,不能忘记加(我就是忘记加了keep-alive) <template> <div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"><

  • vue中keepAlive组件的作用和使用方法详解

    vue中keepAlive组件的作用和使用方法详解

    前言 在面试的时候,很多面试官再问vue的时候可能就会提一嘴,你知道keep-alive有什么作用吗? keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹

  • Vue设置keepAlive不生效问题及解决

    Vue设置keepAlive不生效问题及解决

    目录 设置keepAlive不生效 1.在App.vue中的设置 2.在router中的index.js设置 keep-alive缓存组件不生效的坑 坑出现背景 坑的原因 代码如下 设置keepAlive不生效 如演示,Vue页面导航回退后页面重新刷新了,搜索条件及结果都重置了,对于页面需要频繁切换的系统来说,体验不佳,我们希望页面第一次打开时加载,此后回退不再刷新 查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 1.在App.vue中的设置 <template> &

  • Vue项目中keepAlive的使用说明(超级实用版)

    目录 keepAlive的使用 一共有三个步骤 keepAlive的注意事项 问题描述 原因 include and exclude max keepAlive的使用 在开发的过程中如果碰到经常浏览需要缓存的页面,而且页面很长需要记录滚动的位置这时就需要用到keepAlive. 一共有三个步骤 1.首先在路由中的mate属性中记录keepAlive,如果需要缓存则置为true. path:'/index', name:''index', component:()=>import('../../i

  • 浅析Vue项目中使用keep-Alive步骤

    vue 2.1.0之前,实现方式: 1 /router/index.js 配置路由元信息keepAlive: true { path: "user", name: "用户管理", component: User, meta: { requireAuth: true, keepAlive: true // 用户列表需要被缓存 } }, 2 /app.vue <keep-alive> <router-view v-if="$route.met

  • Vue项目中引入ESLint校验代码避免代码错误

    Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

  • vue项目中一定会用到的性能优化技巧

    vue项目中一定会用到的性能优化技巧

    目录 引言 性能优化标准 Lighthouse 通用常规优化手段 通用性能优化分析 FCP(First Contentful Paint) LCP(Largest Contentful Paint) SpeedIndex(速度指数) 排查性能瓶颈 分析包内容 利用chorme devtool 的代码覆盖率 针对vue 的特殊优化 图片懒加载 虚拟滚动 vue 中的函数式组件 利用v-show .KeepAlive 复用dom 分批渲染组件 最后 引言 提起性能优化 很多人眼前浮现的面试经验是不是

  • vue项目中如何实现网页的截图功能 (html2canvas)

    目录 vue实现网页的截图功能 (html2canvas) 先安装html2canvas 引入html2canvas 主要实现代码 在使用html2canvas时 vue拖动截图功能实现 安装html2canvas.vue-cropper 在main.js注册vue-cropper组件 页面中引入html2canvas 代码分解 总结 vue实现网页的截图功能 (html2canvas) 最近做地图的项目,有个需求就是前端需要将网页的内容生成一张图片,这个功能如果让后端做的话,前端需要把大量的代

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • 详解如何使用webpack在vue项目中写jsx语法

    本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

  • vue项目中v-model父子组件通信的实现详解

    vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • vue项目中导入swiper插件的方法

    vue项目中导入swiper插件的方法

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件

随机推荐