Vue反应性地添加和修改数组和对象的值

有时，您必须添加和修改数组和对象的值，但是在直接添加和修改它们之后，您会丢失getter和setter。

由于JavaScript的限制，Vue无法检测到以下已更改的数组：

1.当项目直接由索引设置时，例如：vm.items[indexOfItem]=newValue

2.修改数组长度时，例如：vm.items.length=newLength

为了避免第一种情况，以下两种方式会达到类似vm.items[indexOfItem]=newValue的效果，也会触发状态更新：

//vue . setvue . set(example 1 . items，item的索引，新值)//array . prototype . splice ` example 1 . items . splice(item的索引，1，新值)为避免第二种情况，请使用splice:

例1。物品。split (new length) vue不允许在已创建的实例上动态添加新的根级反应属性。但是，它可以使用Vue.set(对象、键、值)方法向嵌套对象添加响应属性：

你也可以使用虚拟机。$set实例方法，也是全局vue.set方法的别名：

这个。$ set(这个。2)有时你想给一个现有的对象添加一些属性，例如，使用Object.assign()或_。extend()方法添加属性。但是，添加到对象的新属性不会触发更新。在这种情况下，您可以创建一个新对象，并让它包含原始对象的属性和新属性：

//替换` object.assign (this.someobject，{a: 1，b : 2 })` this.someobject=object . assign({ }，this . some object，{a: 1，B: 2}) this。someobject=_。extend ({a: 1，b: 2}，这个。someobject)示例代码：

！DOCTYPE html html lang=' zh-cn ' head meta charset=' utf-8 ' title/title/head body div id=' app ' ol Li v-for='列表中的数据' { data . id } }-{ { data . name } }/Li/ol/div script type=' text/JavaScript ' src=' http 3360./下划线/下划线-min . js '/脚本脚本类型=' text/JavaScript ' src=' http :/Vue . 2 . 1 . 8 . min . js '/script script type=' text/JavaScript ' var oVue=new Vue({ El : ' # app '，data : { list : [ {id : 5}，{ id : 6 }]})；/脚本/正文/html

以上是VueI在添加和修改数组和对象值时触发状态更新的方法。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！