关于Vue.nextTick()的正确使用

什么是Vue.nextTick()

官方文档解释如下：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

什么时候需要用的Vue.nextTick()

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

 selectAttrEx(attr, attrGroup) {
               var self = this;
               attrGroup.list.forEach(function (item) {
  　　　　　　　　　　  if (item.active) {
                        if(parseInt(item.attr_point)>0)
                        self.goods_point = self.goods_point - parseInt(item.attr_point);
                    }
                    Vue.set(item,'active',false);
  　　　　　　　　});
               if(parseInt(attr.attr_point)>0)
               self.goods_point = self.goods_point + parseInt(attr.attr_point);
  　　　　　　　　Vue.set(attr,'active',true);

               Vue.nextTick(function () {
                   var attrTxt = '';
                   var attrid='';
                   $.each($('.active'), function(index, item){
                       attrTxt+= (' ' + $(item).text());
                       attrid+= ($(item).attr('attrid')+'|');
                   });
                   $('.id-attr').text('已选择' + attrTxt);


                   var attrArr=[];
                   if(attrid!==""){
                       attrid=attrid.substring(0,attrid.length-1);
                       console.log(attrid);
                       attrArr=attrid.split('|');
                   }

                   var attrLength=0;
                   if(self.goods.attr_info.length!=0){
                       attrLength=self.getJsonLength(self.goods.attr_info);
                   }
                   if(attrArr.length<attrLength){
                       self.goods_stock=self.goods.goods_info.goods_number;

                   }else{
                           if(self.attrs.indexOf(attrid)>-1){ //存在
                               self.goods_stock=self.pro[attrid];
//
                           }else{
                               self.goods_stock=0;
                           }


                   }
               });
            },

引用块内容
以上代码：商品属性变化时，随着商品属性变化而变化的商品库存展示。