【vue进阶之旅】如何使用keep-alive做组件缓存？

前言

今天我要给大家分享的是如何使用keep-alive做组件缓存？

为什么要做组件缓存？什么场景下会用到组件缓存？或许很多小伙伴根本不知道keep-alive这个组件，也或许知道keep-alive可以做组件缓存，但是却从来没有实践过，懵懵懂懂，刚好我曾经有过使用keep-alive做组件缓存相关的项目经验，现在我就给大家分享一下keep-alive这个组件到底是怎么回事？在项目中应该怎么用？应该注意些什么？

keep-alive的使用场景？

现在给大家讲一讲keep-alive的使用场景，比如你在购物网站，不断地滚动屏幕，当滚动到了很久很久，你突然发现一件你很喜欢的商品，你点击进入详情，当你查看了该商品的详情，返回出来要保持之前的位置继续往下浏览商品，你会怎么做？再比如你在一个页面有多个tab，默认是会选中第一个tab，当你在第二个tab切换到其他页面的时候（比如对应tab的详情），再次返回到当前的页面，要保持你去之前的tab和对应的状态，你会怎么做？

这里如果没有使用组件缓存的话，当你点击商品详情页面，当前商品列表的页面就会销毁，当你从商品详情返回到商品列表的时候，这个页面已经重新进行了构建，是不会保存在你之前刚刚浏览的位置的，又会返回到最顶上的位置，这个时候你让用户再重复把刚刚的内容再刷一遍吗？而用户的需求是继续之前的位置，可以接着往下滑。切换tab的场景也是这样的道理，不会保存你离开之前的状态，下面我会深入讲解。

vue的八大生命周期

我目前写了一个tab案例，帮助大家理解keep-alive,对应的逻辑和代码如下： 一共有tab1和tab2两个页面，点击按钮会显示对应tab的内容，点击color按钮，会变更内容的颜色，同时会在控制台打印所有生命周期。

<template><div><h1>keep-alive组件缓存</h1><Button type="success" @click="Success()">tab1</Button><Button type="warning" @click="warning()" style="margin-left:30px">tab2</Button><Button type="error" @click="error()" style="margin-left:30px">color