记一次bug调试过程

背景：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产生后，查看重复的树节点的子节点，发现两个节点的子节点的数据并不是一致的，具体可以看图。这个时候就想到是否是排查两个数据是否一致。

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等。

本文因项目原因，较多部分没有展示出来，关键部分以及解决思路都有记录下来，如果有什么指导意见或者想要吐槽的，欢迎评论。