vue组件刷新

前两天，在工作中遇到一个特别难搞的问题，搞笑的是做梦梦到自己解决了，醒来却忘记了解决办法，确实挺绝望了，还好最后搞出来了，跟大家分享下我遇到的问题
我是用的element里面的 el-switch组件

  <el-switch
    v-model="item.isOn"
    :active-value=true
    :inactive-value=false
    :disabled="item.isDisableSwitch"
    @change="switchChange($event,item,index)"
     inactive-text="开启活动推荐">
  </el-switch>

这个开关是放在一个商品里面的，大致逻辑就是，按条件搜索出相关商品，当选中商品时才可以设置是否开启活动推荐，item.isOn是控制el-switch是否开启，(true为开启)；item.isDisableSwitch设置是否禁用该el-switch开关
备注下：isOn,和isDisableSwitch都是我在拿到搜索出的商品信息后给每个商品添加的状态，我在data中增加一个数组checkSwitch:[],用于存放选中的switch集合，searchGoodsList用于存放条件搜索出来的所有商品数据

初始时遍历所有的商品数据，并给初始商品数据的isOn，isDisableSwitch赋值，但是在这里面需要判断一下

for(let i=0;i<this.searchGoodsList.length;i++){
        // 重新搜索  若商品的活动推荐已经开启 则开启活动状态 此时的活动推荐应该为可用状态
        let indx = this.checkSwitch.indexOf(this.searchGoodsList[i].id);
        if(indx != -1){
                this.searchGoodsList[i].isOn=true;
                this.searchGoodsList[i].isDisableSwitch=false;
        }else{
                this.searchGoodsList[i].isOn=false;
        }
        // 重新搜索  若选择的商品活动推荐未开启  则此时的开启活动推荐 应显示可用状态
        let inx = this.checkList.indexOf(this.searchGoodsList[i].id);
        if(inx != -1){
              this.searchGoodsList[i].isDisableSwitch=false;
        }else{
              this.searchGoodsList[i].isDisableSwitch = true;
       }
}

但是页面上的推荐开关点击去没有反应

并且当我有别的操作，比如点击旁边商品按钮或者切换搜索条件时，就有反应了，感觉总是慢半拍

我这边把点击时加的@change事件，把点击后此商品的isOn打印出来，显示为true，但是点击按钮就是没反应

 // 活动开启
        switchChange($event,item,index){
            console.log(item.isOn,'item.isOn');
            // 不传值  则默认值为true / false
            if(!item.isDisableSwitch){
                if($event){
                    if(this.checkSwitch.length<5){
                        this.checkSwitch.push(item.id);
                    }
                }
                else{//如果此时把开启的活动推荐关闭
                    for(let i=0;i<this.checkSwitch.length;i++){
                        if(this.checkSwitch[i]==item.id){
                            this.checkSwitch.splice(i,1);
                        }
                    }
                }
            }  
        },

我开始推测可能是新的属性没有触发数据更新
于是我使用的 $set方法在判断里面this.$set(item,'isOn',true)，或者this.$set(item,'isOn',false),但是还是没反应
为了确确定它执行了我的操作判断，我在@change里面的判断中，各打印了1和2，控制台里面也显示了

我开始推测可能是数据源头出了问题，也就是搜索出来的时候数据锁死了，所以后来点击怎么也不改变，我在@change事件中将搜索出来的所有商品打印出来，但是发现，此时我点击的商品的isOn已经改变了

我猜可能是searchGoodsList数据没更新吧

for(let i=0;i<this.searchGoodsList.length;i++){
     this.$set(this.searchGoodsList[i],'isOn',item.isOn);
}

还是不行，百度了下，铺天盖地都是提示我视图不更新，我甚至跑到搜索点击后把每条搜索出来的数据也更新了下还是不行
最后中午用手机来百度，看到一个跟别的不一样的方法，于是抱着试试的态度加上去了

 // 活动开启
        switchChange($event,item,index){
            console.log(item.isOn,'item.isOn');
            // 不传值  则默认值为true / false
            if(!item.isDisableSwitch){
                if($event){
                    this.$forceUpdate();//强制重新渲染页面
                    if(this.checkSwitch.length<5){
                        this.checkSwitch.push(item.id);
                    }
                }
                else{//如果此时把开启的活动推荐关闭
                    this.$forceUpdate();//强制重新渲染页面
                    for(let i=0;i<this.checkSwitch.length;i++){
                        if(this.checkSwitch[i]==item.id){
                            this.checkSwitch.splice(i,1);
                        }
                    }
                }
            }  
        },

但是，但是竟然成功了，激动呀^_
所以百度了下this.$forceUpdate()这个用法用于 强制刷新，用于解决v-for中修改某个属性值后页面v-if不改变的问题，也就是因为数据层次太多，render函数没有自动更新，需手动强制刷新组件

最后感谢https://blog.csdn.net/jerryyang_2017/article/details/82467016的分享，希望也能帮到你们