vue的keep-alive用法技巧

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

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

方法1

include: 字符串或正则表达式。只有匹配的组件会被缓存。

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

exclude优先级大于include

<keep-alive include="a,b">
 <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
 <component :is="view"></component>
</keep-alive>

方法2  （结合berforeRouteEnter，缓存部分页面）

缓存的页面 created 会执行只有一次，activated每次都会执行 ， created 里面做 第一次 isFirstEnter = true(由于页面被缓存，所以一直生效)，之后再activated 里面做判断 只有 “不是返回回来的” 和 “第一次进来的” 就刷新数据， 并且要在下面 都设为false, 以免缓存各标识不对，在进入 “列表页” 时，通过router钩子函数 beforeRouteEnter做判断，详情页过来的设 isBack 为true,即不刷新页面

以上就是全部相关知识点内容，感谢大家对我们的支持。

赞 (0)

相关推荐

  • vue中keep-alive组件的入门使用教程

    一.问题触发并解决 最近自己在写vue练习,内容相对简单,主要是对vue进行熟悉和相关问题发现,查漏补缺.简单说下练习的项目内容及问题的产生: 练习使用的vue-cli 2.0脚手架搭建,内容就是简单的仿音乐播放app,功能也相对简单,大体就是单页router切换各个专辑列表,点击进入专辑内容页面,单击歌曲名称可以进行播放.暂停.下一曲功能. 简单的背景介绍完了,说下问题产生的情形:在从整个歌曲列表页点击跳转到单个专辑列表页,然后点击返回按钮返回歌曲列表页时,页面保存了之前的浏览位置,但是接口重

  • vue的keep-alive中使用EventBus的方法

    最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了keep-alive组件来缓存页面数据,但是当在其他页面做一些操作改变了列表数据,当来到列表的时候每次都要下拉刷新一下,体验不好,所以就使用到了EventBus,在需要更新的时候就用EventBus来刷新列表. 1.keep-alive组件 keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素.但是对于展示型页面比较好用,表单类页面也会将所填

  • vue使用keep-alive保持滚动条位置的实现方法

    前言 下班前,20分钟,发一篇... 简单介绍,使用keep-alive的时候,返回前一页,没有保持滚动条位置. 事实上,就算不使用keep-alive,位置也没有被记录. 但是,在不适用keep-alive的时候,页面内容会刷新,所以就随他去了--就是这么任性-- 思路 官方有推荐一个scrollBehavior,链接,但是上面标注,只在history.pushState的浏览器生效,不知道是不是只能开启history.pushState才可以使用,看了下实现,挺不友好的,还是自己搞一个吧..

  • vue里如何主动销毁keep-alive缓存的组件

    问题产生的背景 我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来. 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃. 依赖环境 这个项目是基于一个开源 vue

  • 详解keep-alive + vuex 让缓存的页面灵活起来

    详解keep-alive + vuex 让缓存的页面灵活起来

    引入 在使用vue + vue-router开发SPA的时候,有没有遇到过这样的情况:当我们在列表页和详情页之间切换的时候,如果列表页不做缓存,会导致每次从详情页返回时,列表页都会重新加载.如下图: 细心的朋友已经发现了,当从详情页返回列表页的时候,列表页重载了,这样的体验显然不好,这时我们可以对列表页进行缓存处理. keep-alive实现页面缓存 我们的项目不一定所有页面都需要做缓存处理,所以这里介绍两种按需缓存的方法: 方法一: 首先在定义路由的时候配置 meta 字段,自定义一个Keep

  • Vue.js双向绑定操作技巧(初级入门)

    Vue.js双向绑定操作技巧(初级入门)

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue.js最重要的一个特点就是双向数据绑定也就是我们常说的MVVM:Model-View-ViewModel.我们要实现双向绑定首先当然要有"双向",这里vue.js为我们提供了View层和Model层.View层就是在HTML中的代码,Model层则是Javascript代码. 下面是一个最基

  • vue中appear的用法

    关于appear的用法和enter的用法相似,它只是在第一次渲染的时候才会起作用.看完整的代码: 别忘了引用vue.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始渲染的过渡</title> <script src="vue.js"></script>

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • vue中keep-alive的用法及问题描述

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.keep-alive的基本用法 在app.vue中 <!-- 缓存所有的页面 --> <keep-alive> <router-view v-if="$route.meta.keep_alive"&g

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • Vue Extends 扩展选项用法完整实例

    Vue Extends 扩展选项用法完整实例

    本文实例讲述了Vue Extends 扩展选项用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Extends 扩展选项</title> <script type="text/javascript" src="https:/

  • vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值. 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了 用法如下: HTML: <div id="app"> <input

  • vue.js中toast用法及使用toast弹框的实例代码

    1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

  • Vue插槽原理与用法详解

    Vue插槽原理与用法详解

    本文实例讲述了Vue插槽原理与用法.分享给大家供大家参考,具体如下: 1 插槽内容 Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 它允许你像这样合成组件: <div id="app1"> <navigation-link url="/profile"> Your Profile </navigation-link>

随机推荐