Vue.set和vm.$set和Vue修改数组中的元素的方法和Vue监视数据的原理

一、Vue.set和vm.$set

如需给后添加的属性做响应式,请使用如下API:
             Vue.set(target，propertyName/index，value)

        或  vm.$set(target，propertyName/index，value)

• target：要在其上添加属性的目标对象。
• propertyName/index：要添加的属性名或属性索引。
• value：要设置的属性值。

特别注意:Vue.set(）和 vm.$set()）不能给vm或vm的根数据对象添加属性
 

二、Vue修改数组中的元素的方法

1.使用Vue.set或vm.$set方法插入新值：

Vue.set(vm.list, index, newValue);

vm.$set(vm.list, index, newValue)

其中，vm.list是要修改的数组，index是新值要插入的索引，newValue是新值。

 2.使用Vue.delete方法删除某个数组元素：

Vue.delete(vm.list, index);

其中，vm.list是要删除元素的数组，index是要删除的元素的索引。

3.使用splice方法可以修改数组的内容 

array.splice(start, deleteCount, item1, item2, itemN);

start：必需。规定从何处添加/删除元素。 

deleteCount 参数用于指定在调用 array.splice() 方法时要删除的元素数量，如果省略或者为 0，则仅插入元素；如果为正数，则从 start 索引开始连续删除 deleteCount 个元素；如果为负数，则视为 0，即不删除元素；如果超过数组长度，则删除从 start 索引开始之后的所有元素。

item1, item2, itemN：可选。要添加到数组的新元素。

使用splice方法添加新元素的示例代码如下：

vm.list.splice(index, 0, newValue);

其中，vm.list是要修改的数组，index是新值要插入的位置，newValue是新值。

使用splice方法删除元素的示例代码如下：

vm.list.splice(index, 1);

其中，vm.list是要删除元素的数组，index是要删除的元素的索引，1表示删除1个元素。

4.使用push方法可以向数组末尾添加元素

vm.list.push(newValue);

其中，vm.list是要修改的数组，newValue是新元素。 

5.使用pop方法可以删除数组最后一个元素

vm.list.pop();

其中，vm.list是要删除元素的数组。

6.使用shift方法可以删除数组第一个元素 

vm.list.shift();

7.使用unshift方法可以向数组开头添加元素

vm.list.unshift(newValue);

三、Vue监视数据的原理