1️⃣前因后果

笔者最近在用NW.js和vue开发一个桌面端的笔记软件，准备用vue-router和vue的KeepAlive实现多标签功能（如下图效果），每个笔记页面其实就是/note/{笔记ID}。预期的效果是关闭笔记标签页后，自动清掉那个页面的cache，于是，笔者首先想到的办法是使用KeepAlive的include属性，给它传入一个动态的数组，里面是组件的key（这里使用路由path作为key），当标签页关闭后，从出数组里删除页面的key，不就行了吗？可惜，通过实践和查阅文档，include属性只看组件的name，不看组件的key。那怎么办，毕竟复用同一个组件的的不同页面不好设置组件name属性。就在这时，笔者想到了个好办法，直接改写vue的源码就不行了？于是我开始了实践。

2️⃣开始patch

可喜的是，笔者惯用的包管理工具pnpm自带了一个patch工具，操作并不复杂。

1. 创建patch临时目录

pnpm patch @vue/runtime-core@3.4.33

使用这条命令创建一个临时的patch环境，@vue/runtime-core是要打补丁的包名，笔者要改的KeepAlive组件的代码就在里面。

若命令执行成功，输出的消息会有临时目录的路径，通常按住CTRL点击目录就能打开它。

Patch: You can now edit the package at:
  D:\Projects\LitePad\node_modules\.pnpm_patches\@vue\runtime-core@3.4.33 (​file://D:\Projects\LitePad\node_modules\.pnpm_patches\@vue\runtime-core@3.4.33​)
To commit your changes, run:
  pnpm patch-commit 'D:\Projects\LitePad\node_modules\.pnpm_patches\@vue\runtime-core@3.4.33'

2. 在patch临时目录修改源码

我们找到源码文件后，即可直接修改它。

关于如何让KeepAlive同时也基于组件的key来控制cache，笔者参考了这个Pull Request。

接下来就是找到PR指定的位置，改源码就行

patch源码时笔者有以下建议

写个console啥的，用到识别是否在已patch环境；注释原来的代码，而不是删除。3. 提交patch

pnpm patch-commit 'D:\Projects\LitePad\node_modules\.pnpm_patches\@vue\runtime-core@3.4.33'

使用这个命令来commit（提交）这次patch。（这条命令在第一步的命令执行后就给出了，直接复制粘贴就行）。

命令执行成功后会重新安装被patch的包，同时会在项目的根目录生成了patchs目录，里面的文件记录了patch的文件、行数、diff等信息，还有package.json文件也会有改动。

patch是始终跟随项目走的，即使别人clone你的项目，安装依赖，patch仍然能被应用并生效，pnpm会自动完成这些工作。

3️⃣结语

如果你需要临时改动代码，那patch绝对是个不错的办法。