Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值会导致Vue无法更新View。

正确的方法是不要对数组元素赋值,而是使用Vue定义的数组变异方法来更新数据:

通过splice()方法,删除某个元素后,再添加一个元素,达到“赋值”的效果

vm.todos[0] = {
  name: 'New name',
  description: 'New description'
};
var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

1、变异方法

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
pop() 方法用于删除并返回数组的最后一个元素。
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
sort() 方法用于对数组的元素进行排序。
reverse() 方法用于颠倒数组中元素的顺序。

2、替换数组

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat() 方法用于连接两个或多个数组。
slice() 方法可从已有的数组中返回选定的元素。

3、其他

split() 方法用于把一个字符串分割成字符串数组。