Vue 内置组件keep-alive的使用示例

这篇文章主要介绍了Vue 内置组件keep-alive的使用示例，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下

一、keep-alive 用法

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

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

Props：

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

include & exclude

如果你只想缓存部分组件的状态，可以使用include属性。

如果你想除掉一些组件，其他的才被缓存，可以使用exlucde属性。

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

				?

									<keep-alive :max="10">

									  <component :is="view"></component>

									</keep-alive>

使用示例：

1.缓存所有页面：

				?

									<keep-alive>

									    <router-view></router-view>

									    <!--这里是会被缓存的组件-->

									</keep-alive>

2.根据条件缓存部分页面

(更多用法见官网API)

				?

									<template>

									  <div id="app">

									    // 1. 将缓存 name 为 newsList 或者 productList 的组件

									      <keep-alive include='newsList,productList'>

									         <router-view/>

									      </keep-alive>

									    // 2. 将不缓存 name 为 test 的组件

									    <keep-alive exclude='test'>

									      <router-view/>

									    </keep-alive>

									  </div>

									</template>

									<script>

									export default {

									  name: 'App'

									}

									</script>

注意：

还有一步，你必须在需要被缓存状态的组件的script部分，给组件添加一个name属性。如果没有使用keep-alive缓存状态的组件，可以不写name属性。但是如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。并且，这个属性的值，还必须跟标签中include属性的值完全一致，包括大小写。以productList.vue组件为例　

				?

									<template>

									    <!-- 这里是productList组件的html结构部分 -->

									</template>

									<script>

									export default {

									    name: "productList",  //如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。

									    data(){

									        return {}

									    }

									</script>

3.结合vue-router，缓存部分页面

				?

									export default new Router({

									  mode: 'history',

									  routes: [

									    {

									      path: '/',

									      name: 'home',

									      component: Home,

									      children: [

									        {

									          path: 'products',

									          name: 'products',

									          component: products,

									          meta: {

									            keepAlive: true // 需要缓存

									          }

									        },

									        {

									          path: 'newsDetails',

									          name: 'newsDetails',

									          component: newsDetails,

									          meta: {

									            keepAlive: false  // 不需要缓存

									          }

									        }

									      ]

									    }

									  ]

									})

在 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>