vue组件keep-alive的应用及原理

介绍

keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了include与exclude两个属性，允许组件有条件地进行缓存。

 

应用场景

比如移动端页面的基本架构是tab点击来切换页面。每个页面都是一个组件，每次切换路由，都会重新渲染这个组件。都得重新请求数据。这样会造成网络资源浪费，而且页面在切换的时候因为重新渲染所以会有闪动，用keep-alive就可以实现页面DOM缓存，解决页面切换闪动问题。

 

原理

其实就是在created时将需要缓存的VNode节点保存在this.cache中／在render时,如果VNode的name符合在缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。