Vue对一些方法进行了包装和变异，以后数组通过这些方法进行数组更新，会出发视图的更新。这些方法如下：

1. push()：添加元素的方法。

    this.books.push("西游记")
   

2. pop()：删除数组最后一个元素。

    this.books.pop()
   

3. shift()：删除数组的第一个元素。

    this.books.shift()
   

4. unshift(item)：在数组的开头位置添加一个元素。

    this.books.unshift("西游记")
   

5. 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,'西游记','骆驼祥子')
   

6. sort(function)：排序。

    this.books.sort(function(x,y){
        // 取两个随机数排序
        a = Math.random();
        b = Math.random();
        return a-b;
    });
   

7. 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>