共计 1318 个字符，预计需要花费 4 分钟才能阅读完成。
| 导读 | 这篇文章主要介绍了 vue 数组双向绑定问题及 $set 用法说明，具有很好的参考价值，希望大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 |
vue 数组双向绑定问题及 $set 用法
在 vue 开发中，我们有时会遇到数据更新视图不更新问题，地址没有改变，vue 就监测不到数据变化。这个时候，双向绑定就失效了。
以下这几种情况,Vue 都会检测不到数据的变化
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
数组实现响应式的七个方法
删除：两个参数，splice(index,num) 删除的第一项的位置以及要删除的项数
添加：三个参数，插入起始位置、删除的项数（为 0）、插入的项，向指定位置插入任意数量的项。arr.splice(1,0,”or”,”ue”)
替换：先删除再添加，三个参数：起始位置、删除的项数、要添加的项数。添加的与删除的数量不一定要一致。arr.splice(1,2,”or”,”ue”)
sortNumber(a,b){return a-b}；上面的方法把原数组更改掉，可以选用这些方法来实现响应式。
flter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。使用这些方法会造成数据双向绑定失效。
$set 用法
当数据没有被双向绑定的时候，我们可以使用 $set
this.$set(原数组, 索引值, 需要赋的值)
vue 中 $set 解决数据双向绑定
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
解决：用 $set 方法
当你修改数组的长度时，例如：vm.items.length = newLength
解决：vm.items.splice(newLength)
this.$set(Object, key, value)
//this.$set(this.list[i],"flag",true)
正文完
星哥说事-微信公众号
