为了帮助重构和优化 vue3 的代码，我构建了这个工具

上链接！

vue-hook-optimizer playground

在左边输入 vue3 组件，然后点击 analaze 按钮，可以在右边显示组件里的变量和方法的调用。

目前只支持 setup 语法块书写的组件，后期会考虑支持 options api 写法。

说一下开发的动机。

最近接手了一个很复杂的项目，单个 vue 组件里有 2000 行左右，所有的逻辑都揉在一起，而且注释也不是很完整。所以想要有一个工具，能够帮我分析一下，哪些模块是耦合比较高的，哪些部分是完全不相关的或者关联比较少的，然后可以把功能独立成 hook 来调用，这样也更容易测试。

于是我就开发了这个工具。不过目前来看，把调用管理用图表示，能提供的帮助还是比较小的，所以在这里和大家一起讨论一下。

1. 图的展示有哪些更好的方式，暂时计划是把节点的类型加上
2. 我希望能够通过图和代码，自动给出一些优化建议，但是目前没有什么思路

最后，欢迎大家点击上面的链接尝试，或者到项目主页点个 🌟 。