社区划分：让AI理解你的代码重构意图

用了 Vue Hook Optimizer 和 MCP 一段时间以后，我发现了一个有趣的现象：

AI 的建议确实不错，但总感觉它在"瞎蒙"。

比如，它会告诉我"这些变量应该提取为一个 Composable"，但到底是提取哪几个？哪些应该分开？AI 给的答案看起来有道理，但我还是会纠结------这样分对不对？有没有更好的方式？

后来我意识到问题在哪了：AI 看到了代码的依赖关系，但它不知道我心里是怎么想的。 它需要更多的"线索"来理解我的重构思路。

这就是为什么我们需要社区划分（Community Detection） 这个功能。

什么是"社区划分"？说得很简单

我常常这样想象：把你的代码看成一个大的办公室。

初看起来，每个人都在忙自己的事儿。但你仔细观察以后，会发现：

有些人经常聚在一起讨论，他们一直在合作
有些人虽然坐在同一个办公室，但其实各干各的事儿
有些人经常在不同的小组之间跑来跑去

如果你是团队的负责人，你会怎么做？把这些"经常在一起的人"划分成几个小组会时一个好主意：

小组内部沟通快，工作效率高
每个小组的职责清晰，不会乱套
出问题了，一眼就能看出是哪个小组的事儿

写代码也是这个道理。

你组件里的变量和函数，它们之间也有类似的"抱团现象"。isOpen 和 handleOpenChange 通常会一起出现，某些函数依赖特定的数据。Vue Hook Optimizer 的社区划分功能，就是自动找出这些"经常混在一起的变量和函数群体"，然后给你展示出来。

从"发现问题"到"理解结构"

前两篇文章咱们讲过：

我是这样重构和优化组件的：介绍了如何发现代码的问题（比如没用的变量、套娃函数、乱七八糟的耦合）
Vue Hook Optimizer + AI: 探索 Vue 组件代码优化的新境界：介绍整个工具链，尤其是 MCP 和 AI 怎么帮你优化代码

但这里有个问题：当 AI 说"建议提取为 Composable"的时候，它其实是在瞎猜。

AI 能看到代码的依赖关系，但它不知道你心里怎么想的。你认为哪些代码"天生就应该在一起"，AI 要一个一个地试。

现在有了社区划分功能以后，不一样了。 它给你展示了代码的"自然分界线"。

一眼看清哪些变量和函数关系比较紧密
直观理解代码的内部逻辑分组
然后告诉 AI："你应该这样分"

VSCode 里的社区树视图

在最新的扩展中新增了社区树视图功能。当你打开一个文件，左边会出现个**「Variable Communities」** 面板。里面是个树形结构。

长什么样子

每一个 Community 就是一个"紧密相关"的小团体。 表示它们之间联系比较多：

经常一起出现
一个变了，其他的也跟着变
通常都是在干同一件事儿

点一下试试：交互式高亮

你可以打开面板右上角的 community colors 功能开关，当你点击某个 Community 成员时，VSCode 就会用同一种颜色把这个社区里的所有代码高亮出来。

这个功能真的很爽，因为：

一目了然 - 那些散落在代码各个角落的东西，突然就串在一起了，你能看出它们确实都是一回事儿
发现意外的关联 - 有时你会发现，名字看起来没啥关系的变量，其实在背后都是一个家族。（比如 isOpen 和 handleOpenChange，虽然一个是状态，一个是处理函数，但它们就是天生一对）
重构变得有底气 - 不用再纠结"这些应该放在一起吗？"了，高亮给了你答案

一个真实的例子

假设你有个组件，代码长这样：

vue 复制代码

<script setup lang="ts">
// 一坨，什么都混在一起
const count = ref(0);
const searchText = ref('');
const searchList = ref([]);
const isSearching = ref(false);
const isDialogOpen = ref(false);
const apiData = ref(null);
const dialogTitle = ref('');

const doubleCount = computed(() => count.value * 2);
const increment = () => count.value++;

function handleOpenDialog() { isDialogOpen.value = true; }
function handleCloseDialog() { isDialogOpen.value = false; }

async function loadApiData() { /* ... */ }
function processApiData(data) { /* ... */ }

// 还有更多...
</script>

<template>
  <div>
    <input v-model="searchText">
    <button @click="handleOpenDialog">
      Open
    </button>
    <div>{{ doubleCount }}</div>
  </div>
</template>

没有社区划分时，你会纠结：

我到底该分成几个 Composable？2 个？3 个？
哪些东西应该在一起，哪些应该分开？
这些东西之间的关联程度有多深？

用了社区划分以后，树视图告诉你：

scss 复制代码

Variable Communities
├── Community 1 (3 members) 搜索
│   ├── searchText
│   ├── searchList
│   └── isSearching
├── Community 2 (4 members) 对话框
│   ├── isDialogOpen
│   ├── dialogTitle
│   ├── handleOpenDialog
│   └── handleCloseDialog
├── Community 3 (3 members) 计数
│   ├── count
│   ├── doubleCount
│   └── increment
└── Community 4 (3 members) API
    ├── apiData
    ├── loadApiData
    └── processApiData

现在就清楚了：

一共 4 个独立的功能模块，可以分别提取
点击每个 Community 看高亮代码，确认这就是你想要的分组
然后告诉 AI ："我看到了 4 个社区，我想分别提取为 useSearch、useDialog、useCounter 和 useApiData，帮我生成代码"

让 LLM 真正读懂组件

这才是最有意思的部分。当把 MCP 和社区划分结合起来，会发生啥？

传统的套路（效率低）

你： "帮我优化这个组件吧"
AI： "我看到可以提取 5 个 Composable，叫 useA, useB, ..."
你： "等等，这样分不对，A 和 B 应该在一起啊"
AI： "哦，那我重新给你想想..."
你： "嗯...还是不太对..."

结果： 来来回回几个回合才能定下来。

新的套路（直接快狠准）

现在 mcp 的返回结果中会包含社区划分的信息，AI 会直接根据这些信息生成代码。

你： "帮我优化这个组件吧"
AI： "我看到 4 个社区，我想分别提取为 useSearch、useDialog 等，你看怎么做？"
你： "很不错，就按照这个划分"

结果： AI 生成的代码会非常精准，符合你的预期。

为什么差别这么大？

说白了就一句话：AI 和你终于对上"频道"了。

你看着高亮代码，真正理解了代码的分界线
AI 看着社区数据，准确了解了你的分割方案
双方基于同一份信息聊天，自然就能达成共识

SKILL.md

如果你使用的是支持 SKILL 的编辑器比如 Claude Code 或者 VSCode ，那强烈推荐你安装组件重构 SKILL。你只需要在安装 mcp 后，将链接中的内容复制到 ~/.claude/skills/vho-refactor/SKILL.md 中。在和 llm 沟通时，要求他使用 vho-refactor 技能分析和重构组件。

原理概述

你可能好奇：Vue Hook Optimizer 背后是怎么找出这些社区的？

粗略讲讲：

建立关系网 - 看代码里哪些变量互相依赖，哪些被同一个地方使用
看名字的含义 - 分析变量名字本身的意思。比如 isOpen 和 handleOpenChange 虽然一个是状态，一个是处理函数，但它们在语义上是相关的
自动分组 - 根据上面两点，找出关联度最高的变量群体，给它们分到一个社区里

类比一下： 就像根据公司里人们的沟通频率和共同话题，系统自动把相关的人分到一个小组，不用你手动指定。

关键是，这套东西不仅看"代码的依赖关系"，还看"代码的含义"。所以结果往往更符合人的直觉，不是冷冰冰的纯逻辑分析。

整个流程是啥样的

现在你有了完整的链路：

markdown 复制代码

分析代码    →  看依赖图    →  看社区树    →  和 AI 聊天    →  生成代码
    ↓             ↓              ↓              ↓              ↓
统计问题    →  理解结构    →  确认分组    →  精准建议      →  开始重构

分析 - 找出未用的东西、套娃函数、乱七八糟的耦合
可视化 - 看代码的依赖关系和社区分组
AI 加持 - 告诉 AI 你的想法，它给出精准方案
开干 - 按照社区划分提取 Composable 或 Custom Hook

尾巴

代码优化这件事，没有什么"一键搞定"的。需要你自己去理解，需要 AI 来帮忙，也需要一个好的可视化工具才能真正看清楚。

社区划分功能就是那把钥匙。 它让你能：

一眼看穿代码的"自然分界"
让 AI 懂你的想法
有信心地做出重构决策

如果你对这个功能感兴趣，可以打开 VSCode，装上 Vue Hook Optimizer 扩展，找一个复杂的组件，跑一遍分析。

欢迎来 GitHub 提 Issue 或者讨论。我很想听听你用社区划分功能后的反馈！