VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面不渲染问题

重点:this.$forceUpdate();
html

<div class="invoice-list"  v-for="(item,index) in data" :key="index">
        <img src="../../../../../static/images/arrow_bottom.png" v-if="item.imgIf" @click="clickImg(item,$event)">
</div>

js

data(){
  return {
      data:[
      {imgIf:false,id:1},
       {imgIf:false,id:2}
      ]
  }
},
 methods:{
    clickImg(item){
       for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].id=== item.id) {
          this.data[i].imgIf = !this.data[i].imgIf;
        }
      }
 }
}

可是实际点击之后页面没有任何改变,但打debugger发现数据确实改了，之后修改代码：

    clickImg(item){
       for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].id=== item.id) {
          this.data[i].imgIf = !this.data[i].imgIf;
        }
      }
      //加上这段
       this.$forceUpdate();
   }

添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：数据层次太多，render函数没有自动更新，需手动强制刷新。