Vue对一些方法进行了包装和变异，以后数组通过这些方法进行数组更新，会出发视图的更新。这些方法如下：
-
push()：添加元素的方法。this.books.push("西游记") -
pop()：删除数组最后一个元素。this.books.pop() -
shift()：删除数组的第一个元素。this.books.shift() -
unshift(item)：在数组的开头位置添加一个元素。this.books.unshift("西游记") -
splice(index,howmany,item1,...,itemX)：向数组中添加或者删除或者替换元素。// 向books第0个位置添加元素 this.books.splice(0,0,"西游记") // 下标从0开始，删除2个元素 this.books.splice(0,2) // 下标从0开始，替换2个元素 this.books.splice(0,2,'西游记','骆驼祥子') -
sort(function)：排序。this.books.sort(function(x,y){ // 取两个随机数排序 a = Math.random(); b = Math.random(); return a-b; }); -
reverse()：将数组元素进行反转。this.books.reverse();
还有一些Vue没有包装的方法，比如filter、concat、slice，如果使用这些方法修改了数组，那么只能把修改后的结果重新赋值给原来的数组才能生效。比如：
this.books = this.books.filter(function(x){
return x.length>3?false:true;
})
视图更新注意事项：
直接修改数组中的某个值是不会出发视图更新的。比如：
this.books[0] = '西游记';
这种情况应该改成用splice或者是用Vue.set方法来实现：
Vue.set(this.books,0,'西游记');
如果动态的给对象添加属性，也不会触发视图更新。只能通过Vue.set来添加。比如：
<div id="app">
<ul>
<li v-for="(value,name) in person">{{name}}:{{value}}</li>
</ul>
<script>
let vm = new Vue({
el: "#app",
data: {
person: {"username": '波哥'}
},
methods: {
changePerson: function(event){
// 直接修改this.person.age是没有效果的
// this.person.age = 18;
Vue.set(this.person,'age',18)
}
}
});
</script>
</div>
