关于组件缓存

问题一：

列表页->详情页，列表页里含一些筛选框和一表格，详情页里含各种组合表单控件。

为了满足用户体验，列表页组件List与详情页组件Detail都采用了进行缓存，这样做的好处是，切换页面时依然会保留用户的数据。这条是非常有必要的，比如你填了一大串表单，切走页面，回来的时候发现啥也没了，崩溃有木有！ORZ…

（会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须为组件显式声明一个 name）

缓存是通过组件name来找的。但我们的系统里有多个列表菜单，对应的详情页Detail内容是一致的，所以会共用Detail组件，组件name命名要求唯一。此时想了个解决方案：动态的为组件生成name。经过一番查找，网上也有同样问题的网友 https://segmentfault.com/q/1010000040423777 感谢提供了思路~

解决方案：

评估了自身系统的特点，套空壳的办法最为简便好用，新建一层vue组件，引入共用的Detail组件，再声明唯一的name值。

问题二：

继续刚才的背景接着说，多个列表页可以缓存了。新的问题又来了，列表页中入口a进入详情页，再点击入口b进入详情页，详情页的内容依然是a详情页里的内容（因为做了缓存）。既需要它，又不让它什么时候都有，让缓存在该来的时候来就可以了

解决方案：

<keep-alive>
   <component :is="Component" :key="route.fullPath" />
</keep-alive>

这上面的key值是关键，用 key 来让组件重新渲染。如果 key保持不变，则不会更改组件。 但是，如果key发生更改， Vue 知道它应该删除旧组件并创建一个新组件
当key值的fullPath，也就是带参数的路由地址发生变化，就会重新渲染

以上是对自己项目中遇到问题的一个粗略总结和回顾，如果还能帮助到正在面对问题的你，那就再好不过的啦~~