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>
複製代碼

項目開始前的預熱內容，具體問題，要等到項目中去發現，解決