面试题系列---data数据改变，页面不更新原因及解决方案

Posted 2021-06-21 程序媛...

一、为什么会出现data数据改变，页面不更新

vue2是用过Object.defineProperty实现数据响应式，组件初始化时，对data中的数据进行递归遍历，对data的每一个属性进行劫持，添加set,get方法。我们后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新。

二、解决vue中对象属性改变视图不更新的问题？

情况一：数组

1.数组的值改变，在改变数组的值的是时候使用索引值去更改某一项，这样视图不会实时更新

2.当你修改数组的长度时,这样视图不会实时更新**

解决方法：

1.Vue.set(example1.items[0], { childMsg: \'Changed!\'}：

​ 一个参数是需要更新的数组或对象，第二个参数是数组的下标或者对象的属性名，第三参数是更新的内容。

//数组的第3个内容更新为"向日葵"
let arr = ["玫瑰花","康乃馨","薰衣草"]
this.$set(arr,2,"向日葵")   //第一个参数是数组，第二个参数是下标，第三个参数是新的内容
//更新之后的arr是["玫瑰花","康乃馨","向日葵"]

2.使用Vue的变异方法 pop() push() shift() unshift() revese() sort() splice() 也会触发视图更新

情况二：对象

是改变了对象的某一项，但是其他依赖这个数据的视图没更新

解决方案：

1.利用Vue.set(object,key,val)

2.利用this.$set(this.obj,key,val)

3.利用Object.assign({}，this.obj)创建新对象

4.可以先删除掉该项，然后再使用set 去添加