精华内容
下载资源
问答
  • vue组件缓存
    2021-10-26 16:26:16

     动态组件在切换的过程中,组件的实例都是「重新创建」的,而我们需要保留组件状态。

     为了解决这个问题,你还需要使用 vue 内置组件 <keep-alive>。

    <!-- 组件内部-->
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件,比如 Home! -->
        </router-view>
    </keep-alive>
    
    <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件,比如 Edit! -->
    </router-view>
    //router/index.js
    export default [
        {
            path: '/',
            name: 'home',
            component: Home,
            meta: {
              keepAlive: true // 需要被缓存
            }
        }, {
            path: '/:id',
            name: 'edit',
            component: Edit,
            meta: {
              keepAlive: false // 不需要被缓存
            }
        }
    ]

    可以选择性的进行组件的缓存

     <keep-alive> 提供了两个属性 include 与 exclude。

    1. include:只有名称匹配的组件会被缓存。
    2. exclude:任何名称匹配的组件都不会被缓存。
      <keep-alive include="a,b"></keep-alive>
      <keep-alive :include="/a|b/"></keep-alive>
      <keep-alive :include="['a', 'b']"></keep-alive>
    更多相关内容
  • 详解Vue组件缓存

    2020-10-17 03:20:07
    主要介绍了Vue组件缓存,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue 中的组件缓存

    千次阅读 2021-07-24 11:24:11
    一、介绍 先来看一个问题? 从首页的区块链模块切换到文章详情页面,再从文章详情页面回到首页,我们发现首页... 主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

    一、介绍

    先来看一个问题?
    在这里插入图片描述

    从首页的区块链模块切换到文章详情页面,再从文章详情页面回到首页,我们发现首页重新渲染原来的状态没有了,又回到了推荐模块。

    首先,这是正常的状态,并非问题,路由在切换的时候会销毁切出去的页面组件,然后渲染匹配到的页面组件。

    但是我想要某些页面保持状态,而不会随着路由切换导致重新渲染。

    二、解决方案

    使用 keep-alive 缓存组件

    官方文档:在动态组件上使用 keep-alive

    主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

    (1)组件缓存不是持久化,它只是在应用运行期间不会重新渲染,如果页面刷新还是会回到初始状态。

    (2) 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。

    (3) 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。

    (4)组件生命周期钩子和缓存
    在这里插入图片描述
    (5)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>
    

    匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

    三、项目中的缓存配置

    参考链接:

    https://juejin.im/post/5d22f0f3f265da1b94216d0b

    问题描述:

    在这里插入图片描述
    我们希望

    1. 登录成功后,就把缓存给清除掉,让组件重新进行渲染。

    2. 等页面渲染完成后,再给页面加上缓存(keep-alive)

    实现思路:给keep-alive 的include属性绑定一个动态的数组,因为keep-alive只会缓存include数组中的组件

    首页在Vuex容器中定义这个动态数组cachePages:
    在这里插入图片描述
    然后,在用户登录成功之后,清除layout组件的缓存:
    在这里插入图片描述
    在这里插入图片描述
    这样就解决了上面提到的,用户1登录后退出登录,使用用户2的账号登录时,”我的“页面的个人信息展示的还是用户1的个人信息的问题。
    在这里插入图片描述
    但是此时,layout组件没有缓存,当登录的用户从区块链频道点击 某篇文章 -> 进入文章详情页面后,再返回到首页时,首页会重新进行渲染,无法回到之前用户所在的区块链频道,而是直接变成首页渲染成功后默认显示的推荐频道。

    为了解决这个问题:我们可以在layout组件的渲染完成之后,给它加上缓存。
    在这里插入图片描述

    解决缓存带来的列表滚动位置问题:

    就是列表滚动的位置没有缓存下来,也就是用户在首页的 区块链模块的文章列表滚动了一段距离后,进去文章详情页面,再返回到首页时,页面确实还在区块链模块,但是列表滚动的位置又回到了列表顶部。

    在这里插入图片描述

    在这里插入图片描述
    layout切换到文章详情页面,触发activated生命钩子:
    在这里插入图片描述
    文章详情页面切换到layout,触发deactivated生命钩子:
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 使用Vue自定义组件时需要注意在那个生命周期中初始化组件 有这样一个业务需求: 页面中包含两个div, 两个div通过选择radio切换显示 div的显示通过v-if控制 每个div中都包含一个自定义select组件 两个select组件中的...

    使用Vue自定义组件时需要注意在那个生命周期中初始化组件
    有这样一个业务需求:

    1. 页面中包含两个div, 两个div通过选择radio切换显示
    2. div的显示通过v-if控制
    3. 每个div中都包含一个自定义select组件
    4. 两个select组件中的list不一样

    页面完成够发现两个div中的select组件都可正常下拉\选择值, 但是当在div a中的select选择了值后, 比如选择value a, 再通过radio切换到div b, 发现div b中的select上显示div a中选择的值value a, 而value a不存在与div b中的select的data list中.
    初步估计是select组件中显示的label从上一个vue实例中缓存了下来, 在mounted钩子中没能过滤掉这个这个值.
    打印出来看看:
    在这里插入图片描述
    发现在mounted状态中组件中显示的label, 即截图中的selectShow为空, 因此不能被过滤掉. updated状态selectShow的值就出现了, 这时获得了selectShow值的引用我们就可以过滤掉上一个vue实例的selectShow的值了.
    但是, updated状态我们的组件已经更新完成, 就是说组件已经完成显示了, 已经显示在我们的屏幕上了, 这时再去过滤值就会引起属性的更新, vue就会再走一遍生命周期的流程, 这是一个死循环, 在更新完成状态updated中开始新更新, 会导致浏览器卡死.

    那么, 我们应该在哪里进行数据过滤呢?
    除了updated状态外, 还有一个生命周期能获得selectShow的引用, 并且不会导致死循环.
    在这里插入图片描述
    这就是beforeUpdate, 在beforeUpdate中我们可以放心的进行数据过滤, 例如直接将selectShow置空.
    出现这种问题的原因编写组件时对vue的生命周期不够了解, 通常只在mounted中进行前置操作, 没有考虑到属性在vue实例的不同生命周期的不同状态.

    展开全文
  • 首先我们要知道为什么需要组件缓存? 在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合 理的方式组织起来,那么自然会存在组件之前切换的问题,Vue 中有个动态组件 的概念,它能够帮助...

    首先我们要知道为什么需要组件缓存?

    在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合

    理的方式组织起来,那么自然会存在组件之前切换的问题,Vue 中有个动态组件

    的概念,它能够帮助开发者更好的实现组件之间的切换,但是在面对需求频繁的

    变化,去要切换组件时,动态组件在切换的过程中,组件的实例都是重新创建的,

    而我们需要保留组件的状态,为了解决这个问题,需要使用到 Vue 中内置组件  <keep-alive>

    <keep-alive>的作用

    包裹动态组件时,会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染。

    (应用场景)

    比如有一个列表和一个详情,那么用户就会经常执行打开详情=>

    返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可

    以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列

    表的时候,都能从缓存中快速渲染,而不是重新渲染。

    展开全文
  • 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果。 那么我们给部分组件加上,实现方法如下: 在app.vue里 <!-- 这里是需要keepalive的 --> <router-view v-if="$route.meta.
  • Vue中的组件缓存

    2020-11-26 18:12:24
    Vue中的组件缓存 使用 keep-alive来对组件进行缓存,组件就不会被频繁创建销毁,间接提升了性能 在对组件使用keep-alive时,组件内部可以使用回调actived 和deactived钩子函数 来对当前路由表示是否活跃,当路由被激活时...
  • keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下
  • 说说 Vue组件缓存

    千次阅读 2019-04-19 20:38:50
    当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存。 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来。 自然就存在组件之间...
  • vue 缓存部分组件!

    千次阅读 2020-01-08 11:01:22
    1.缓存部分组件 <keep-alive :include="['addpatient']"> <router-view /> </keep-alive> 有些场景需要回到某个页面不刷新,保持里面的内容,这时候就需要缓存页面,但是不能全部缓存的情况下,...
  • 今天小编就为大家分享一篇vue 使某个组件不被 keep-alive 缓存的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 解决vue组件传值异步数据不同步
  • keep-alive vue组件缓存避免多次加载相应的组件 转载于:https://www.cnblogs.com/zhaoyun4122/p/10845401.html
  • vue.js 动态组件缓存 keep-alive

    千次阅读 2018-10-09 00:25:56
    文章目录动态组件如图代码问题keep-alive代码UI 框架的 Tabs 组件(iView)例子 动态组件 在不同组件之间进行动态切换 比如:选项卡,点击不同的tab显示相应的组件。 注意:页面上只有当前选择的组件,而不是把...
  • vue组件缓存 keep-alive缓存列表

    千次阅读 2018-02-07 11:04:38
    vue组件缓存 keep-alive缓存列表:vue页面数据缓存,从列表到详情,列表数据不需要缓存;从详情返回列表,详情不需要缓存,当然也可以缓存,假如访问的是同一条数据-另作处理。
  • component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve), title: '基金首页', redirect: 'fundProListG/fundProListG', meta: { keepAlive: false // 不需要被缓存 }, ...
  • Vue设置组件缓存

    2018-02-05 15:23:00
    Login.vue中: 1 export default { 2 name: "login", // 设置组件...App.vue中: 除了"login",其他组件缓存 1 <keep-alive exclude="login"> 2 <router-view></router-view> 3 <...
  • 都知道keep-alive是用于vue组件缓存的,那内部如何实现缓存的呢,一起来看看吧 先放简单的文章导图: 1.keep-alive 在vue中起到什么作用 先来看看官网对keep-alive的一些功能说明: 组件之间切换的时候,你有时...
  • Vue用keep-alive缓存组件

    2022-04-14 21:19:48
    用途:对于动态切换的组件进行包裹,使其能够进行缓存,而不是销毁掉后重新创建 在系统开发中,界面上有时会需要对某一块内容进行切换,如果这一部分的内容是几个组件频繁动态切换,为了提高效率,可以使用keep-...
  • 希望组件缓存。 keep-alive 的使用方式: 将要缓存组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时,也不会...
  • 主要介绍了vue里如何主动销毁keep-alive缓存组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 一、切换组件案例 比如我们现在想要实现了一个功能: 点击一个tab-bar,切换不同的组件显示; 这个案例我们可以通过两种不同的实现思路来实现: 方式一:通过v-if来判断,显示不同的组件; 方式二:动态组件...
  • keep-alive组件能够对页面进行缓存操作,在一些开发场景上较为常用,include为需要缓存组件name,exclude为不缓存组件name,tips:缓存组件需指定name值,并且要和include的对应,否则缓存不成功 transition组件...
  • vue中的缓存组件(keep-alive)

    千次阅读 2021-02-28 00:21:23
    当我们进行频换切换,不需要重复渲染的时候,比如tab栏切换,就可以利用keep-alive缓存组件,不需要重复加载,也是提高vue性能的一个方式。 keep-alive是什么? keep-alive是一个抽象组件:它自身不会渲染一个DOM...
  • 晚上好。今天讲vue中的组件缓存
  • keep-alive,vue组件缓存问题

    千次阅读 2018-04-28 16:24:54
    Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。  包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,514
精华内容 17,005
关键字:

vue组件怎么缓存