如何区分Vue Devtools中的组件实例

Question

当我在Vue的devtools chrome扩展中查看我的应用程序状态时,我可以在树视图中看到同一组件的多个实例.但是,没有办法区分一个实例与另一个实例.例如,在下面的屏幕截图中有三个<Todo>组件.想象一下,有30个.如何将某种实例名称或ID附加到我的组件？点击30个组件找到我需要的组件似乎很愚蠢.

Answer 1

几个月前我也有同样的想法。

所以我尝试了一下。

我的 PR 已提交：https ://github.com/vuejs/vue-devtools/pull/331

现在依赖我的解决方案可能有点早，因为核心团队仍然可以拒绝 PR 或请求其他命名约定。

在此之前，您可以从我的存储库自行构建我的提案版本： https://github.com/nerdyglasses/vue-devtools/tree/verbose-component-tree

这对你有帮助吗？

最好的，基督教