Vue中keep-alive组件详解-优快云博客

1.keep-alive定义

keep-alive是vue的内置组件，可以在组件切换过程中保留组件的状态，避免被重新渲染，但其自身是一个抽象组件，不会渲染DOM元素

2.用法

<keep-alive>
    <component>
        // ...
    </component>
</keep-alive>
复制代码

3.属性

include: str || reg,匹配到的组件被缓存
exclude: 匹配到的组件都不会被缓存
max: num, 可以缓存的最多组件实例

export default {
    name: 'xxx',
    // ...
}

// name为xxx的组件被缓存
<keep-alive include="xxx">
    <component>
        // ...
    </component>
</keep-alive>

// 同理，不缓存name为xxx的组件
// 只需要将include换为exclude即可
复制代码

4.与vue-router结合使用

<keep-alive include="xxx">
    <router-view>
        // ...
    </router-view>
</keep-alive>
复制代码

以上情况中所有<router-view>匹配到的组件都将被缓存

如果我只想缓存<router-view>匹配到组件中的某些组件，该如何是好？不急，有办法

include/exclude 如上述例子，在<router-view>中匹配到的xxx组件才会被缓存
meta属性

// router/index.js
export default [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: {
            keepAlive: true  // 需要被缓存
        }
    }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        // ...
    </router-view>
</keep-alive>
复制代码