对vue中数据添加新值，监测不到数据的变化的情况详解

一、原因

Vue实现了数据的双向绑定，所以当我们修改数据的值的时候，Vue会监测到数据的变化，对页面进行实时更新

但是有以下几种情况Vue是监测不到数据的变化的

1.对于数组

1.当直接使用索引值直接设置一个项时

2.当修改数据的长度时

2.对于对象

在vue中，vue给每个数据都通过object.defineproperty()给每个属性都添加了一个set和get，用于对数据的读取和修改，但是当直接向对象中添加属性或者删除属性时，新添加的数据没有get和set配置，所以监测不到变化

1.当直接向对象中直接添加一个新的属性时（obj.属性名= 属性值）（解决方法：）

2.当直接向对象中直接删除一个属性时（解决方法：）

二、解决方法

1.使用splice()方法【限于数组】

this.arr.splice(索引值，删除个数，属性值)

2.使用$set方法

this.$set(数据源，属性索引，属性值)

3.使用$delete方法

this.$delete(数据源，属性)

三、总结

1.vue会监视data中所有层次的数据

vue监视的数据都是响应式的

2.如何监测对象中的数据

通过setter实现监视，且要在new Vue时就传入要监测的数据

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式处理

1	Vue.set(target, propertyName/index, value)

或

1	app.$set(target, propertyName/index, value)

3.如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质上就是做了两件事：

• 1.调用原生对应的方法对数组进行更新(push()、pop()、、、)
• 2.重新解析模版，进而更新页面

4.在Vue中修改数组中的某个元素一定要用如下方法：

• 1.使用这些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse() 注意：以上为变更方法，会变更调用了这些方法的原始数组。也有非变更方法，例如filter()、concat()和slice()，它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组直接替换旧数组
• 2.Vue.set()或app.$set()

引用于Vue不能检测到数据变化的几种情况说明_vue.js_脚本之家