vue 中 keep-alive 组件的作用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

解析：

用法也很简单：

    <component>
        
    component>

props _ include - 字符串或正则表达，只有匹配的组件会被缓存 _ exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

// 组件 a
export default {
    name: "a",
    data() {
        return {};
    }
};

"a">
    <component>
        
    component>
可以保留它的状态或避免重新渲染

"a">
    <component>
        
    component>
可以保留它的状态或避免重新渲染

但实际项目中, 需要配合 vue-router 共同使用.

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

    <router-view>
        
    router-view>

如果只想 router-view 里面某个组件被缓存，怎么办？

增加 router.meta 属性

// routes 配置
export default [{
        path: "/",
        name: "home",
        component: Home,
        meta: {
            keepAlive: true // 需要被缓存
        }
    },
    {
        path: "/:id",
        name: "edit",
        component: Edit,
        meta: {
            keepAlive: false // 不需要被缓存
        }
    }
];

    <router-view v-if="$route.meta.keepAlive">
        
    router-view>
 
<router-view v-if="!$route.meta.keepAlive">
    
router-view>