有些時候，不得不想添加、修改數組和對象的值，但是直接添加、修改后getter、setter又失去了。
由於 JavaScript 的限制， Vue 不能檢測以下變動的數組：
- 當你利用索引直接設置一個項時，例如：
vm.items[indexOfItem] = newValue - 當你修改數組的長度時，例如：
vm.items.length = newLength
為了避免第一種情況，以下兩種方式將達到像 vm.items[indexOfItem] = newValue 的效果， 同時也將觸發狀態更新：
// Vue.set Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue)
避免第二種情況，使用 splice：
example1.items.splice(newLength)
Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上：
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象，讓它包含原對象的屬性和新的屬性：
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
this.someObject = _.extend({ a: 1, b: 2 }, this.someObject)
示例代碼:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <ol> <li v-for="data in list">{{data.id}} - {{data.name}}</li> </ol> </div> <script type="text/javascript" src="../underscore/underscore-min.js"></script> <script type="text/javascript" src="./vue.2.1.8.min.js"></script> <script type="text/javascript"> var oVue = new Vue({ el : '#app', data : { list : [ {id : 5}, {id : 6} ] } }); </script> </body> </html>
