keep-alive: 是 vue 内置的一个组件, 可以使被包含的组件保留状态或避免重新渲染. 有两个生命周期函数: activated,deachtivated. 在 vue 2.1.0 版本后新增了两个属性: include 与 exclude.
生命周期函数 (在服务端渲染时, 以下两个钩子函数不会被调用)
activated: 在 keep-alive 组件激活是调用. 如果每次进入页面的时候获取最新的数据, 需要在 activated 阶段获取数据, 承担原来 created 钩子函数中获取数据的任务
deachitivated: 在 keep-alive 组件停用时调用.
属性
include:
类型: 字符串 (include="") 或 表达式 (使用 v-bind:include="")
作用: 只有名称匹配的组件才会被缓存
exclude(优先级 > include):
类型: 字符串 (exclude="") 或 表达式 (使用 v-bind:exclude="")
作用: 任何名称匹配的组件都不会被缓存
max:
类型: Number
作用: 最多可以魂村多少组件实例
组件缓存实例
- // 新增一个组件:
- export default {
- name: 'test-keep-alive',
- data () {
- return {
- includedComponents: "test-keep-alive"
- }
- }
- }
- // 实例:
- <keep-alive include="abc">
- <!-- 将缓存组件名 = abc 的组件 -->
- <component></component>
- </keep-alive>
- <keep-alive include="a,b">
- <!-- 结合动态组件, 将缓存 name 为 a 或 b 的组件 -->
- <component :is="a"></component>
- </keep-alive>
- <!-- 使用正则表达式, 需使用 v-bind -->
- <keep-alive :include="/a|b/">
- <component :is="view"></component>
- </keep-alive>
- <!-- 动态判断 -->
- <keep-alive :include="includedComponents">
- <router-view></router-view>
- </keep-alive>
- <keep-alive exclude="test-keep-alive">
- <!-- 将不缓存 name 为 test-keep-alive 的组件 -->
- <component></component>
- </keep-alive>
页面缓存实例 (结合 vue-router)
- <keep-alive>
- <router-view v-if="$route.meta.keepAlive"></router-view>
- </keep-alive>
- <router-view v-if="!$route.meta.keepAlive"></router-view>
- // 在 router 的 index.JS 中配置 meta 元信息
- export default new Router({
- routes: [
- {
- path: '/',
- name: 'Hello',
- component: Hello,
- meta: {
- keepAlive: false // 不需要缓存
- }
- },
- {
- path: '/page1',
- name: 'Page1',
- component: Page1,
- meta: {
- keepAlive: true // 需要被缓存
- }
- }
- ]
- })
生于忧患, 死于安乐
来源: http://www.bubuko.com/infodetail-3280749.html