keep-alive是什么
keep-alive是Vue内部的一个组件，这个组件能让在它内部的组件一直“活着”，会将他们缓存起来，不会被销毁，下次如果再用到他们直接去缓存中取。
没有keep-alive的router-view
当我们没有keep-alive的router-view，情况是这样的，举个例子：'/home'->'/about',实际上是做了两个操作。
- 销毁home组件
- 创建了about组件
如果我们在home组件之前有些修改，那么就不会保存下来。因为切换回来的时候home组件是重新创建的。这里我写了一个小栗子，我home组件里可以通过点击改变字体颜色：
看看当我切换的时候会不会保存我切换的颜色：
应该也好理解，他重新创建了home组件，data中的color变量又变成了'red'
有keep-alive的router-view
由于keep-alive的特性，会使router-view一直活着，被缓存起来，**也就是说任何替换router-view的组件都不会被销毁！**而只是进入不活跃状态。那这时候，我们加上keep-alive再看看上个需求实现了嘛
perfect!
keep-alive衍生物
- activated 这是一个类似生命周期函数的钩子，意思是进入活跃状态，当组件进入活跃状态的时候被调用。
- deactivated 这是另一个相对的钩子，意思是进入不活跃状态，当组件进入不活跃状态的时候被调用。
- 请注意，以上两个钩子只有被keep-alive包裹的组件才存在。一般组件是不存在的，毕竟，只有keep-alive中的组件才会存在活跃和不活跃，其他组件只存在生存还是毁灭。
- keep-alive组件还有两个属性，一个是include，一个是exclude。有可能我们并不需要keep-alive中所有组件的状态都被缓存，比如这里我只想缓存home组件的状态。那我可以使用include属性，属性值是什么呢？是组件的name属性那么代码应该是这样的:
<keep-alive include="Home"> <router-view/> </keep-alive>,那么其他组件状态就不会被缓存。如果我的需求是我不希望about组件的状态被记忆，那么代码应该是<keep-alive exclude="about"> <router-view/> </keep-alive>
