vue---如何缓存组件（keep-alive）

vue—如何缓存组件（keep-alive）

1》当我们进行频换切换，不需要重复渲染的时候，比如tab栏切换，就可以利用keep-alive缓存组件，不需要重复加载，也是提高vue性能的一个方式。

2》例子：


（B，C组件省略）

进行点击abc按钮操作，看控制台的输出：
①.若把keep-alive组件删除：
点击a ---- A mounted
点击b ---- A destroyed B mounted
点击c ---- B destroyed C mounted
再点击a — C destroyed A mounted

②.加上keep-alive组件：
点击a ---- A mounted
点击b ---- B mounted
点击c ---- C mounted
再点击a — 不再输出新东西 之后再点击任何按钮都输出上面三句话

说明keep-alive进行了缓存处理

3》这个例子用keep-alive与用v-show的区别：

v-show比较低级，是CSS操作层面的

keep-alive属于比较高级的，是vue操作层级的，通常处理复杂的事务