關于數組

1. 使用數組變異方法

   對Vue實例中data里面的數組使用變異方法操作的時候，Vue可以檢測到變化并進行更新變異方法包括

   • push()
   • pop()
   • shift()
   • unshift()
   • splice()
   • sort()
   • reverse()

2. 非變異方法

   非變異方法因為不會直接改變原始數組，所以需要使用另外的方法，比如用新數組去替換原數組。用含有相同元素的數組去替換原來的數組是非常高效的操作

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:[
         {message:'Foo'},
         {message:'Baz'}
       ]
     }
   })
   example1.items = example1.items.filter(function (item) {
     return item.message.match(/Foo/)
   })
   

兩個錯誤的例子和對應的正確的方法

1. 使用example1.items[0] = newValue這樣的方法來改變數組，改變的值不具有響應特性，正確的方法是

   Vue.set(example1.items, 0, newValue)
   

   或者

   example1.items.splice(0, 1, newValue)
   

2. 使用example1.items.length = newLength的方法改變數組的長度，Vue也無法檢測到變化，正確的方法是

   example1.items.splice(newLength)
   

關于對象

Vue不能動態添加根級響應式屬性，也不能檢測根級屬性中屬性的添加或刪除，這部分內容，看VUE數據data更新而列表不更新，VUE的響應式原理的幾個小例子

1. 既然不能添加根級屬性，那我們就把需要動態添加的屬性嵌套在已有的根級屬性里面，通用使用set方法

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:{
         name: 'john' 
       }
     }
   })
   Vue.set(example1.items, 'age', 27)
   

   效果相同的另一種寫法，在Vue實例內使用

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:{
         name: 'john' 
       }
     },
     methods: {
       setAttribute: function () {
         this.$set(this.items, 'age', 27)
       }
     }
   })
   

2. 如果需要添加的屬性很多，那就可以使用對象替換的方法，這種方法在上面的數組的方法中也用過

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:{
         name: 'john' 
       }
     },
     methods: {
       setAttribute: function () {
         this.items = Object.assign({}, this.items, {
            age: 27,
            favoriteColor: 'Vue Green'
      })
       }
     }
   })
   

   這里要注意的地方是：一定要是對此對象的整體替換，直接操作添加的屬性不具備響應特性

   直接操作的例子

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:{
         name: 'john' 
       }
     },
     methods: {
       setAttribute: function () {
         Object.assign(this.userProfile, {
            age: 27,
            favoriteColor: 'Vue Green'
      })
       }
     }
   })
   

   ?