背景：Vue+element UI构建的下拉树节点选择组件出现数据重复的问题。
本文主要记录调试过程中的分析思路。因为组员在调试过程中花费了较长时间，遂将思路记录并分享出来。
1.复现bug
在进行调试前，由项目组其他成员分析出了复现场景，主要是在多Tab页面中，使用同一个组件，在TabA进行搜索DataA，切换至TabB搜索DataB，返回TabA时，会出现两条DataB。
2.分析过程
2.1 分析前的思考及排查
在看代码前，根据产生的bug现象，觉得应该是某个操作导致树节点中多添加了一个同样的节点。
我们使用的组件支持默认从后端查询数据，也支持传入树形结构的数据作为数据源，通过查看TabB页面使用的组件发现数据源来自TabA页面，通过查看TabA页面以及组件代码发现，只有TreeData的获取以及初始赋值，并且给TreeData添加了一个Watch来进行其他操作，没有相关的修改操作，那么bug的产生不应该是通过对TreeData的修改而产生的。
2.2 契机
在bug产生后，查看重复的树节点的子节点，发现两个节点的子节点的数据并不是一致的，具体可以看图。这个时候就想到是否是排查两个数据是否一致。
2.3 排查数据
通过Vue插件获取对应的Dom节点，查看data，获取节点的编码，如图。因为这里的002是我们选中的DataB，由于知道DataB的子节点只有一个1期，所以直接查看有三个节点的002这个节点的编码。
通过编码，在获取的树组件的数据源中，找到对应的数据，发现对应的节点名称应该是001。从这里可以知道是某个操作导致节点的名称出现了问题。
2.4 分析原因
在上面提到树组件的数据源并没有修改操作，并且TreeData是通过组件中的this.$emit('getTree', this.tree);这行代码设置的，于是在组件文件中搜索this.tree，发现其中根据this.tree有一个this.cursiveGetLabel(this.tree);的调用，在这个方法中有这么一段代码会影响到name。
if (JSON.stringify(this.project) == '{}' && JSON.stringify(this.stage) == '{}') { this.project = { name: t.name, }; this.stage = { name: stage.name, }; } else { this.project.name = t.name; this.stage.name = stage.name; } |
这段代码主要是修改project和stage两个对象的name，符合我们排查时“数据被修改了name”这个原因，根据方法的上下文，尝试注释上面这段代码，并使用以下代码进行替换，在复测时没有复现bug，于是将该段方法会产生bug的原因告诉了正在修复该问题的组员，剩下的修改交由他进行处理。
this.project = project; this.stage = stage; |
3.总结
本文主要是由于同组成员在解决该问题时未能发现原因所在，自己尝试找到原因所在以后将其中的分析思路总结分享出来。关键在于重复数据产生了以后，发现子节点数据的不一致，尝试去发现两个父节点产生的原因，找到问题所在。
在获取重复数据的num时，自己一开始还是使用Vue插件在整个TreeData中去查看哪些节点是002这个名称，并且children的长度为3，而在接下里的调试中，学会用Vue插件直接去获取重复的002这个节点查看绑定的data等。
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理
