vue2.0 keep-alive最佳实践

 更新时间:2017年07月06日 09:22:09   作者:spademan  
这篇文章主要为大家详细介绍了vue2.0 keep-alive的最佳实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

vue2.0 keep-alive的最佳实践,供大家参考,具体内容如下

1.基本用法

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

<keep-alive>
<component>
 <!-- 组件将被缓存 -->
</component>
</keep-alive>

有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下

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

将首次触发请求写在created钩子函数中,就能实现缓存,
比如列表页,去了详情页 回来,还是在原来的页面

2.缓存部分页面或者组件

(1)使用router. meta属性

// 这是目前用的比较多的方式
<keep-alive>
  <router-view v-if="!$route.meta.notKeepAlive"></router-view>
</keep-alive>
<router-view v-if="$route.meta.notKeepAlive"></router-view>

router设置

... 
 routes: [
  { path: '/', redirect: '/index', component: Index, meta: { keepAlive: true }},
  {
   path: '/common',
   component: TestParent,
   children: [
    { path: '/test2', component: Test2, meta: { keepAlive: true } } 
   ]
  }
  ....
  // 表示index和test2都使用keep-alive

(2).使用新增属性inlcude/exclude

2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件

<!-- comma-delimited string -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
<!-- regex (use v-bind) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

//其中a,b是组件的name

注意:这种方法都是预先知道组件的名称的

(3)动态判断

<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>

includedComponents动态设置即可

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

相关文章

  • vue实现登陆登出的实现示例

    vue实现登陆登出的实现示例

    本篇文章主要介绍了vue实现登陆登出的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue调用语音播放的方法

    vue调用语音播放的方法

    这篇文章主要为大家详细介绍了vue调用语音播放的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue cli3 配置proxy代理无效的解决

    vue cli3 配置proxy代理无效的解决

    今天小编就为大家分享一篇vue cli3 配置proxy代理无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue3原始值响应方案及响应丢失问题解读

    vue3原始值响应方案及响应丢失问题解读

    这篇文章主要介绍了vue3原始值响应方案及响应丢失问题解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 基于mpvue的小程序项目搭建的步骤

    基于mpvue的小程序项目搭建的步骤

    mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,这篇文章主要介绍了基于mpvue的小程序项目搭建的步骤,非常具有实用价值,需要的朋友可以参考下
    2018-05-05
  • vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)

    vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)

    这篇文章主要介绍了vue搜索页开发实例(热门搜索,历史搜索,淘宝接口演示),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue项目创建步骤及路由router

    vue项目创建步骤及路由router

    本文主要给大家分享了vue项目的创建步骤以及vue路由router的相关知识点,非常的实用,有需要的小伙伴可以来参考下
    2020-01-01
  • 如何使用 Vuex的入门教程

    如何使用 Vuex的入门教程

    在vue中当我们管理数据的时候比较乱,我们要用到下面的这个库,本文主要介绍了如何使用 Vuex的入门教程,具有一定的参考价值,感兴趣的可以了解一下
    2022-02-02
  • vue的rules验证部分可以部分又失效的原因及解决方案

    vue的rules验证部分可以部分又失效的原因及解决方案

    vue的rules验证失效,部分可以部分又失效,很多百度都有,但是我这里遇到了一个特别的,那就是prop没有写全,导致验证某一个失效,接下来就跟小编一起来看看这个失效的原因和解决方案吧
    2023-11-11
  • vue 翻页组件vue-flip-page效果

    vue 翻页组件vue-flip-page效果

    这篇文章主要介绍了vue 翻页组件vue-flip-page,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02

最新评论