vue中keepalive使用

一、应用场景

在我们用Vue.js做移动端开发的时候，经常会遇到这样的应用场景：

首先，让用户看到新闻列表；然后点击新闻标题，切换到新闻详情的组件，以展示新闻详情。很多应用场景都于此类似，比如先进入商品列表，点击某一个商品条目，则切换到商品详情的组件。

这种场景往往会碰到一个问题，当我每一次从详情组件退回到列表组件的时候，列表组件会重新发出ajax请求。考虑到下面2条原因，总觉得这么不好。

1. 列表组件上的数据不会在短短几分钟之内就更新，完全没必要每次都发出ajax请求。这样势必降低用户体验。
2. 浪费移动设备的流量。（如果流量无限，这条可以无视）

　　如何解决这个问题？

　　可以使用Vue.js自带的keep-alive

二、作用

keep-alive：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

三、Props

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

四、生命周期函数

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated。
使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

1、activated

在 keep-alive 组件激活时调用，该钩子函数在服务器端渲染期间不被调用。

2、deactivated

在 keep-alive 组件停用时调用，该钩子在服务器端渲染期间不被调用。

五、keep-alive用法

1、缓存所有页面

 在 App.vue 里面

<template>
  <div id="app">
      <keep-alive>
        <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

这样会使所有在vue-router中渲染的组件，全部都将状态保留在内存。如果你只想缓存部分组件的状态。那么可以使用keep-alive的include属性。

 2、根据条件缓存页面

在 App.vue 里面

<template>
  <div id="app">
      // 1. 将缓存 name 为 test 的组件
      <keep-alive include='test'>
      <router-view/>
    </keep-alive>
    
    // 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
    <keep-alive include='a,b'>
        <router-view/>
    </keep-alive>
    
    // 3. 使用正则表达式，需使用 v-bind
    <keep-alive :include='/a|b/'>
        <router-view/>
    </keep-alive>    
    
    // 5.动态判断
    <keep-alive :include='includedComponents'>
        <router-view/>
    </keep-alive>
    
    // 5. 将不缓存 name 为 test 的组件
    <keep-alive exclude='test'>
        <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

必须在需要被缓存状态的组件的script部分，给组件添加一个name属性。以test.vue组件为例

<template>
    <!-- 这里是newslist组件的html结构部分 -->
</template>
<script>
export default {
    name: "test",  // 如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。
    data(){
        return {}
    }
</script>

需要说明的是，如果没有使用keep-alive缓存状态的组件，可以不写这个属性。但是如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。并且，这个属性的值，还必须跟<keep-alive>标签中include属性的值完全一致，包括大小写。

六、结合Router，缓存部分页面

1.在 router 目录下的 index.js 文件里

import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import("@/components/home/home")
const Goods = () => import("@/components/home/goods")
const Ratings = () => import("@/components/home/ratings")
const Seller = () => import("@/components/home/seller")

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
            keepAlive: false // 不需要缓存
            }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
            keepAlive: true  // 需要缓存
            }
        },
        {
          path: 'seller',
          name: 'seller',
          component: Seller,
          meta: {
            keepAlive: true  // 需要缓存
            }
        }
      ]
    }
  ]
})

2.在 App.vue 里面

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

<script>
export default {
  name: 'App'
}
</script>