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>
复制代码

项目开始前的预热内容，具体问题，要等到项目中去发现，解决