说一说 vue 的 keep-alive ？

要点： 缓存组件、条件缓存、路由配合条件缓存、不重新加载、activated、deactivated

答：

<keep-alive>作用：缓存组件，提升性能，避免重复加载一些不需要经常变动且内容较多的组件。

<keep-alive>的使用方法：使用<keep-alive>标签对需要缓存的组件进行包裹，默认情况下被<keep-alive>标签包裹的组件都会进行缓存，区分被包裹的组件是否缓存有两种方法，第一种是给keepalive 添加属性，组件名称指的是具体组件添加的name，不是路由里面的name。include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)。exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)。

第二种也是最常用的一种是，和路由配合使用：在路由中添加meta属性。 使用keepalive导致组件不重新加载，也就不会重新执行生命周期的函数，如果要解决这个问题，就需要两个属性进入时触发：activated 退出时触发：deactivated

<keep-alive>适用的场景：首页展示固定数据的组件，比如banner九宫格</keep-alive></keep-alive></keep-alive></keep-alive></keep-alive>

1.效果方面：能在内存保持其中的组件状态，放置重复渲染DOM，减少加载时间，从而提高性能。2.使用方面：有三个属性：include：只有匹配的组件才会被保存。exclude：只有匹配的组件才不会被保存。max：最多能保存的组件数。3.结合Router使用：可以在相应组件下规定meta属性，并将keep-alive设置为true。4.源码实现方面：可以结合Vue组件实例加载顺序讲解，VNode->实例化->_updata->真实Node，在实例化的时候会判断该组件是否被keep-alive保存过，是的话则直接拿其中的DOM进行渲染。