简介

keep-alive 是Vue.js的一个内置实例，做的是缓存 v-node。 其主要用于组件反复切换使用keep-alive可以提高页面渲染的效率 (这也是Vue优化功能点之一).

它能够将不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中

属性

keep-alive共有三个属性：

1. include:记录了哪些组件可以缓存.
2. exclude：记录了哪些组件不能被缓存.
3. msx：记录可以缓存的最大数量.

生命周期

• actived: 在mounted第一次激活之后执行
• dectived: 在失去激活的时候执行

使用

普通使用

//被keep-alive包含的组件全都会被缓存
<keep-alive>
        <component />
</keep-alive>

include使用

//只缓存组件name名为a,b,c的组件
<keep-alive include="a,b,c">
        <component />
</keep-alive>

exclude使用

//不缓存组件name名为a,b,c的组件
<keep-alive exclude="a,b,c">
        <ShopList />
</keep-alive>

max 使用

//不缓存组件name名为a,b,c的组件,并且缓存最多5个组件，超出会先从第一个缓存起来的组件取消缓存
<keep-alive exclude="b,c" ,max="5">
        <Com />
</keep-alive>

注意事项

1. keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，
2. 则匹配当前组件 components 配置中的注册名称。
3. keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
4. 当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高 比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
5. 包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated。

总结

看到这里你是不是离职场大牛更进了一步呢，其实代码真的“挺简单”！