毕业设计中期检查顺利结束，可以抽空稍微整理一下最近遇到的一些问题了，就当给自己留一些笔记备份😁，先稍微整理下对象修改属性时，视图不刷新问题的处理方法。

场景：quForm对象中有meta属性用于存储试题的属性信息，resource是试题的媒体资源属性，当更新试题资源时，直接使用this.quForm.meta.resoucre = newResoucre，虽然数据更新了，但是视图并没有刷新。

data() {
    return {
        quForm: {
            // ...
            meta: {
                resource: {
                    fileId: null,
                    type: null,
                    playLimitCnt: null,
                    autoPlay: false
                }
            }
            // ...
        }
    }
}

此时，有两种解决方法。

使用this.$set

对于this.$set或者Vue.set，官方文档的解释是：

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

因此，你可以使用this.$set(this.quForm.meta, 'resource', newResource)新增对象的属性，并为其添加监听器，使得之后对resource属性的修改，能够同时刷新视图。

但是，需要注意的是，如果resource属性先前已经存在，使用this.$set并不能够添加监听器和刷新视图，此时你可以先使用delete删除resource属性，然后再使用this.$set赋值。

使用this.$forceUpdate

使用this.$forceUpdate()可以强制刷新整个视图。