一、问题描述

在vue开发者工具devTools插件中，有时候会遇到没有Root或点击Root失效等问题。

正常情况如下图：

Vue工具devtools没有root

二、原因分析

源码如下：

上图中的示例是name字段的值完全为中文，然后F12开发者工具中不显示Root标签。

然后又分别测试了以下几个场景。

1）：name属性的值不完全为中文

可以看到当name属性的值不完全为中文时，开发者工具中可以显示Root标签

2）：更换name字段名为name1

我们如果将name属性删掉，显示的就是App 1，值完全为中文也能显示，只是最上面变成了App 1

总结一下：

• 原因应该是name和Vue的某些源码属性重复了，而Vue又刚好有这个中文bug，所以root点了没反应或者直接没有。
• Vue.js devtools对于纯中文数据的兼容性不是很好，所以会出现点击后无任何反应的情况。这里说的是纯中文数据，也就是说但凡带点英文字母或者数字都不会出现这种问题。具体原因还在查找中。

三、解决方法

解决办法一：把data属性的name字段该成其他的

解决办法二：name的value值中文改为英文，或者要包含英文或数字。