Vue改变对象的属性值视图不更新的问题

最近项目在使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下：

查看官方文档后了解到：受到javascript的限制，Vue不能检测到对象属性的添加或删除。因为Vue利用的是Object的defineProperty()方法，在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它。 后通过查找资料修改为使用$set来设定修改值，js如下： 我们可以使用 Vue.set(object, key, value) 方法将响应属性添加到数组里的对象上。 所以将

1this.stuList[index].checked=true;

改成

1Vue.set(this.stuList[index], 'checked', true);

还可以使用 vm.$set实例方法，这也是全局 Vue.set方法的别名:

1this.$set(this.stuList[index],'checked',true);

但是依然没有起作用，

再从查找的资料才知道是数据层次太多，没有触发render函数进行自动更新，需手动调用，调用方式如下:

1this.$forceUpdate();

完整代码如下：

1handleCheck(index) {
2      this.$nextTick(() => {
3        this.$forceUpdate();
4        this.$set(this.stuList[index],'checked',true);
5      })
6    },