vue3手动控制KeepAlive缓存map。

任钰

已于 2022-11-22 16:28:51 修改

阅读量803

点赞数

文章标签： vue.js 前端

于 2022-11-11 09:13:40 首次发布

本文链接：https://blog.csdn.net/renyudouhui/article/details/127799904

版权

此方法在生产模式无法使用， vue3生产模式不暴露map。解决方法如下，酌情使用。

const fs = require("fs");
const path = require("path");
const vue_bundler_file = path.resolve(
  __dirname,
  "../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js"
);
fs.readFile(vue_bundler_file, "utf8", function (err, data) {
  if (err) console.error(err);
  let orginal_str =
    "        if ((process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__) {\r\n            instance.__v_cache = cache;\r\n        }";
  let target_str =
    "        //if ((process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__) {\r\n            instance.__v_cache = cache;\r\n        //}";
  const result = data.replace(orginal_str, target_str);
  fs.writeFile(vue_bundler_file, result, "utf8", function (err) {
    if (err) return console.error(err);
  });
});

"build-mb": "node ./config/removeDEV.js &&  vite build --mode production",

首先需要拿到缓存map
```javascript
<KeepAlive
  	ref={(ref) => clearKeepAliveCache.setKeepMap((ref as { [key: string]: any }).$.__v_cache)}
 </KeepAlive>   
```
手动清除缓存

```javascript
import { VNode } from "vue";

class ClearKeepAliveCache {
  private map: null | Map<string, VNode> = null;

  public setKeepMap(map: Map<string, VNode>) {
    this.map = map;
  }

  //删除方法
  public delete(path: string) {
    if (this.map && this.map.has(path)) {
      this.map.delete(path);
    }
  }
}

export default new ClearKeepAliveCache();

```
还是建议使用KeepAlive得exclude属性去操作，我直接操作缓存map纯属是因为缓存了同一组件，造成exclude属性不能满足。