Vue缓存组件keep-alive的应用

缓存组件keep-alive

什么是缓存组件keep-alive：

vue.js本身提供了一个名为 keep-alive的缓存组件，其可以对目标组件的状态进行保存，即给缓存起来，当重复应用组件的时候，不会执行销毁、创建的程序，相反执行的是之前缓存的信息，既不用发送新请求耗费资源，同时用户显示速度很快，体验很好。

keep-alive官网

keep-alive的原理：

1. 组件缓存就是一旦组件被创建, 那么就不会被销毁, 不执行生命周期销毁钩子函数(beforeDestroy/destroyed)，虽然跳转路由 看不到该组件，但是这个组件DOM对象是存在的，只是以虚拟形式存在的(内存数据存在/页面上没有)，当切回路由时, 虚拟DOM就会立刻转化成显示DOM(浏览器可以看见)。
2. 组件进入缓存状态时，会触发执行生命周期函数 deactivated，激活时执行 activated，可以根据需要使用。activated是生命周期方法，要设置到与data、methods并列的位置。

使用语法：

<!-- 把要缓存的组件同构 keep-alive 组件包围 -->
<keep-alive>
  被缓存组件
</keep-alive>

缓存组件应用：

1. 组件缓存一般应用在标签栏切换的场景，其他地方不要随便使用，会造成负载高，信息容易泄露，有安全问题以及开发、使用上的不便。
2. 针对子路由各个组件进行缓存时，要对子路由占位符进行包围。