vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下：

<template>
  <div>
    <div v-for="(item,index) in list" :class="{'bg':item.red}" :key="index">
      <div>{{ item.name}}</div>
      <button @click="fn(index)" type="info">编辑</button>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      list: [{ name: "kity", red: false }]
    };
  },
  methods: {
    fn(index) {
      // this.list[index].red=true;

      this.$set(this.list[index], "red", true);

      this.$forceUpdate();
    }
  }
};
</script>

<style scoped>
.bg {
  background: red;
}
</style>

在项目中，我们往往需要渲染比较复杂的数据。当数据层次嵌套的比较深时，修改了内层属性值，然而list中的值并没有改变。这时我们可以通过$set来设定修改值，语法如下：

this.$set(this.list[index],"red",true);

如果依然没有起作用，打开debugger发现list的值修改成功，没有渲染到页面上，因为数据层次太多，没有触发render函数进行自动更新，需手动调用，调用方式如下:

this.$forceUpdate();