在用vue做三级联动时遇到的监测问题（附与angular脏检查区别）

做一个三级联动时遇到了样式没有跟着当次数据变化时变化的问题

image.png

也就是说点击title标签的时候按理来说 数据发生变化 vue 应该可以监测到并且渲染在页面上 color标签里的 按钮状态就会实时更新

原理是

 

              

                
Title
              
              
                {{test.name}}
              
              

                
Color
              
              
                {{test.option1}}
              
              

                
Style
              
              
                {{test.option2}}
              

 data() {
      return {
        current_selectSpec: {},
},
methods: {
 sortByName(list) {
        var arr = [];
        return list.filter(function (i) {
          if (arr.indexOf(i.name) < 0) {
            arr.push(i.name);
            return true;
          }
          return false;
        });
      },
      sortByColor(list) {
        let aaalist = [];//对象数组
        let bbblist = [];//规格数组
        if (this.current_selectSpec.name) {//判断选中1级
          for (let i in list) {
            let spec = list[i];
            if (this.current_selectSpec.name === spec.name) {
              //如果接收到的数据里名字有和当前选中的数据名字一样的就把该条数据的名字加入规格数组，把该条数据所在的对象加入到对象数组中
              if (bbblist.indexOf(spec.option1) < 0) {
                bbblist.push(spec.option1);
                aaalist.push(spec);
                bbblist.sort();
              }
            }
            for(let i in list){
              let spec = list[i];
              if (bbblist.indexOf(spec.option1) < 0) {//补充其他一级规格中的二级规格到数组,查找二级规格是否已经存在
                aaalist.push(spec);
                bbblist.push(spec.option1);
              }
            }
          }
        }
        else {//1级没有选中（页面刚打开）
          for(let i in list) {//去重
            let spec = list[i];
            if (bbblist.indexOf(spec.option1) < 0) {
              bbblist.push(spec.option1);
              aaalist.push(spec);
              bbblist.sort();
            }
          }
        }
        return aaalist;
      },
      sortByStyle(list) {
        let aaalist = [];//对象数组
        let bbblist = [];//规格数组
        if (this.current_selectSpec.option1) {//判断选中1级
          for (let i in list) {
            let spec = list[i];
            if (this.current_selectSpec.option1 === spec.option1) {
              //如果接收到的数据里名字有和当前选中的数据名字一样的就把该条数据的名字加入规格数组，把该条数据所在的对象加入到对象数组中
              if (bbblist.indexOf(spec.option2) < 0) {
                bbblist.push(spec.option2);
                aaalist.push(spec);
                bbblist.sort();
              }
            }
            for(let i in list){
              let spec = list[i];
              if (bbblist.indexOf(spec.option2) < 0) {//补充其他一级规格中的二级规格到数组,查找二级规格是否已经存在
                aaalist.push(spec);
                bbblist.push(spec.option2);
              }
            }
          }
        }
        else {//1级没有选中（页面刚打开）
          for(let i in list) {//去重
            let spec = list[i];
            if (bbblist.indexOf(spec.option2) < 0) {
              bbblist.push(spec.option2);
              aaalist.push(spec);
              bbblist.sort();
            }
          }
        }
        return aaalist;
      },
}

ui框架用的是bootstrap

看着代码是没问题的，但是在页面里点击了title里的按钮之后 二级按钮的可选状态并没有更新

这个问题困扰了我很长时间 偶然发现改变一个有v-model属性的input框的value值时 按钮的可选状态更新了，

由此得出结论 是因为vue没有检测到

image.png

看了一下我用来push给临时数组的对象

果然

current_selectSpec: {},

是空的，所以并不是class没给上，因为vue的监测机制 每条数据的监测都是独立的 所以在该次监测中 current_selectSpec对象里面并没有name 、option等键值，没有初始化属性，所以才会出现这种bug。
改变v-model里的值时 由于另一个监测让页面重新渲染 所以它的可选状态跟着更新了。
所以这里初始化一下这个对象的属性

current_selectSpec: {name:'',option1:'',option2:''},

---

分割线

---

相比起angular的脏检查,Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

Angular，因为作用域内的每一次变化，所有 watcher 都要重新计算，所以当 watcher 越来越多时会变得越来越慢。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。

而vue使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。