昨天在使用vue.js的时候遇到了一个非常奇怪的bug，贴出来跟大家分享一下(虽然问题解决了，但还是有点不理解）

       

hideChildren(childrenIds,index){
    //递归让该节点的所有子节点隐藏
    if(index!=null&&index!=''&&index!=-1){
        this.trace.spans[index].isShow=true;
        if(childrenIds!=null) {
            this.trace.spans[index].symbol = "+";
        }
    }
    if(childrenIds!=null){
          var spans=this.trace.spans;
          var ids=childrenIds.split(",");
          //首先把所有该子项
          for(var i=0;i<ids.length;i++){
              for(var j=0;j<spans.length;j++){
                  if(ids[i]===spans[j].spanId){
                      spans[j].isShow=false;
                      //children关闭自己的children
                      this.hideChildren(spans[j].children);
                      break;
                  }
              }
          }
          this.trace.spans=spans;
      }
},
showChildren(childrenIds,index){
    //递归让该节点的所有子节点隐藏
    if(index!=null&&index!=''&&index!=-1){
        this.trace.spans[index].symbol = "-";
    }
   if(childrenIds!=null){
        var spans=this.trace.spans;
        var ids=childrenIds.split(",");
        //首先把所有该子项
        for(var i=0;i<ids.length;i++){
            for(var j=0;j<spans.length;j++){
                if(ids[i]===spans[j].spanId){
                    spans[j].isShow=true;
                    break;
                }
            }
        }
       this.trace.spans=spans;
    }
}

     （PS：排版有点丑）

下面讲重点：

    功能：两个函数分别实现关闭和展开树形子节点

    问题：结果很奇怪了：hideChildren（）函数执行成功，树形节点隐藏功能正常运行，showChildren（）函数执行成功，但是页面上没有任何变化。（要是说vue检测不到 对象的变化，为什么同样的代码一个有效一个没有效呢）

    百度了一下：Vuejs的一些总结 第九点。vuejs检测不到直接索引设置元素，如vm.item[0]={};

   通过这样解决了 vm.$set(key,value)

 

showChildren(childrenIds,index){
    //递归让该节点的所有子节点隐藏
    if(index!=null&&index!=''&&index!=-1){
        this.trace.spans[index].symbol = "-";
    }
   if(childrenIds!=null){
        var spans=this.trace.spans;
        var ids=childrenIds.split(",");
        //首先把所有该子项
        for(var i=0;i<ids.length;i++){
            for(var j=0;j<spans.length;j++){
                if(ids[i]===spans[j].spanId){
                    spans[j].isShow=true;
                    break;
                }
            }
        }
       this.trace.spans=spans;
       this.$set('trace',this.trace);
    }
}








问题是解决了，感觉还是听奇葩的，最终得出来一个结论，“vuejs的bug吧”，如果哪位小伙伴弄清楚了这其中的原理，请分享！