Sublime正则表达式在Vue3组合式API重构中的技巧

夏宇酱_5551

夏宇酱_5551

2026-09-02

946人浏览

原创

安全批量重命名 vue3 的 usexxx hook 需分步验证:先用 \buseuser\b 精准定位、限定 src/**/composables/ 等路径,替换为 usenewuser_temp 后通过类型检查再去除后缀;ref 提取需负向断言避坑,watch/computed 必须人工判断依赖与副作用;每次替换后必须运行 vue-tsc、启动服务查警告、全局搜索残留旧名。

sublime正则表达式在vue3组合式api重构中的技巧

Sublime 的正则表达式不能自动识别 Vue3 的组合式 API 语义,所有“重构”操作本质是带防护的文本替换;盲目跨文件 Replace All 极易把 useUser 改成 useNewUser 后又变成 useNewNewUser,必须分步验证 + 作用域人工判断。

如何安全批量重命名 useXxx 自定义 Hook

Vue3 中自定义 Hook 命名有强约定(use 开头 + 驼峰),这是正则能借力的唯一锚点。但 use 本身太常见,直接搜 useUser 会命中注释、字符串甚至 userStore 里的子串。

  • 先用 Ctrl+F 搜 \buseUser\b,确认高亮全部落在 import 行或 const xxx = useUser() 调用处,排除 "useUser": true 这类 JSON 值
  • 跨文件替换时,Where 栏必须限定路径:src/**/composables/*.ts, src/**/hooks/*.js,坚决避开 node_modules 和测试文件
  • 替换目标别直接写 useNewUser——先替换成 useNewUser_TEMP,跑一遍 npm run type-check 或 vue-tsc --noEmit,确认无 Cannot find name 'useNewUser' 报错再删 _TEMP

ref / reactive 变量批量提取与结构调整

重构时经常要把分散在 setup() 里的状态收进 useXxx(),这时需要把 const count = ref(0) 这类声明精准抽出来,但不能误伤 ref 的其他用法(如 ref(null)、toRef)。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程