1、 keep-alive组件
缓存组件的状态，避免重新渲染
2、两个生命周期函数
activated：在keep-active组件激活的时候调用
deactivated：在keep-active组件停用时调用
首次进入组件时：beforeRouteEnter > beforeCreate > created > mounted > activated > ... ... > beforeRouteLeave > deactivated
再次进入组件时：beforeRouteEnter > activated > ... ... > beforeRouteLeave > deactivated
应用场景
缓存所有页面，在app页面中，用keep-active包裹router-view
根据条件缓存页面，在app页面中，使用include和exclude
缓存部分界面，在router的index.js 中，配置meta的keepActive
3、实际案例
主要理解商品列表和商品详情页，当用户选择商品时，可能会频繁的点击商品列表和商品详情页，从商品详情页返回商品列表时，当然是希望页面保持在刚才选择的位置，所以可以使用keep-alive包裹这商品列表页面，缓存当前选择的状态
4、实际模拟
未使用
此处没有使用keep-alive缓存状态，那么在切换前后，组件都会被重新的创建和销毁，所以呈现的都是全新的页面切换前，我选择的是三弟，切换后，进入组件2，再次切换，界面重新创建，初始值是大弟
使用
使用keep-alive之后会缓存组件的状态，实际上缓存的就是vue实例； 切换前选择二弟，切换进入组件2，再次切换之前的组件，还是二弟，达到了缓存数据的目的
