Vue中如何实现针对特定组件的KeepAlive缓存自动清理策略？

本文共计1615个文字，预计阅读时间需要7分钟。

目录 + 需求 + 思考 + 尝试

1.手动操作 + keep-alive 组件的 cache 数组

2.exclude + 高效 Demo + 需求 + 单页面应用中，用户进入表单填写页面，需要初始化表单内容，填写过程中可能涉及地图选项选择或

目录

• 需求
• 思考
• 尝试
• 1. 手动操作 keep-alive 组件的 cache 数组
• 2. exclude 大法好
• Demo

需求

单页面应用中，用户进入表单填写页面，需要初始化表单内容，填写过程中可能涉及到地图选点或者列表选择等操作，需要到新的页面选择并回调显示。

此时我们需要缓存表单填写页面实例，当退出表单填写或提交完表单内容之后，需要销毁当前表单实例，下次进入重新进行初始化

思考

说到 Vue 缓存，我们肯定首先选择官方提供的缓存方案 keep-alive 内置组件来实现。