如何用vue的keepAlive实现以下业务场景

Question

业务中存在 列表页、编辑页（新增），编辑与新增页面是一个组件，通过列表页有无id传递过来，判断是新增还是编辑页面。

我需要实现如下业务场景：

列表页 -> 选中一条数据a -> 编辑页面 -> 返回列表页 -> 进入新增页面

这个过程中最后一步，从列表页进入新增页面时，因为’新增‘、’修改‘是一个组件，且都使用的keepAlive，所以发现新增页面出现上一条修改页面展示的数据。

这种情况怎么处理呢？

我有考虑过新增的时候清空当前表单绑定的对象，还有没有比较好的办法？ 或者同学们在处理这种业务场景时，是采用什么办法处理的？

Answer 1

这种业务不需要使用keep-alive吧，keep-alive主要是用于保留组件状态或避免重新渲染。列表页有若干条数据，进入编辑页都是需要变化的，更何况新增、编辑是同一个组件，所以完全没有必要使用keep-alive。在编辑的时候传递列表页的row过去进行一下数据绑定就好了。

Answer 2

两个生命周期组件 actived deactived

Answer 3

可以这样：
新增和编辑分别是两个页面，但此两个页面用同一个组件，比如：
新增是Add.vue
编辑是Edit.vue
共用组件是Tpl.vue
Add.vue和Edit.vue都引入Tpl.vue并使用。
此时，Add.vue和Edit.vue实例化的时候，会创建不同的实例（有各自的Tpl组件实例），就不用担心出现数据被缓存的问题了。

keepAlive对于小型项目没有啥问题，但不适合大型项目。特别吃内存！最后会卡到崩溃！

Answer 4

新增编辑页面可以与列表页设计成父子组件，没必要独立，通过props传值是否为空区分新增还是修改