情况1:操作对象,vue在methods里面给对象新增和删除属性,vue检测不到新增属性值的变化,数据会改变,但视图不更新,vue的浏览器插件也检测不到。
例如:HTML: <\div>{{result}}<\div>
在data中声明一个对象 result:{}
在methods里面添加一属性score,this.result [‘score’] = 90,这个时候页面不会刷新。
解决办法:
- 不要新增属性,在声明的时候就定义好包含的属性,result:{name:“”}
- 使用this.$forceUpdate(),强制更新
- 使用this.$set(‘this.result’,‘score’, 90) 给子属性score添加响应式
- Object.assign()
情况2:操作数组,数组的push()、pop()、shift()、unshift()、splice()、sort()、reverse()都可以监测变化,有两个例外:使用索引更改值和直接修改长度。
result[1] = ‘x’
result.length = 2