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

一、原因

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

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

1.对于数组

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

2.当修改数据的长度时

2.对于对象

在vue中，vue为每一个对象中的属性都添加了一个getter和setter,当数据变化时，会监测到数据的变化。但是若是直接向对象中添加一个新的属性的时候，这个新添加的属性并没有setter和getter，所以vue监测不到它的变化

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

2.当直接向对象中直接删除一个属性时

二、解决方法

1.使用splice()方法

this.arr.splice(目标数据，属性，值)

2.使用$set方法

this.$set(目标数据，属性，值)

三、总结

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_脚本之家