Vue響應式添加、修改數組和對象的值

2019-11-19 17:06:10

字體：大中小

來源：轉載

供稿：網友

有些時候，不得不想添加、修改數組和對象的值，但是直接添加、修改后又失去了getter、setter。

由于 JavaScript 的限制， Vue 不能檢測以下變動的數組：

1. 利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue

2. 修改數組的長度時，例如： vm.items.length = newLength

為了避免第一種情況，以下兩種方式將達到像 vm.items[indexOfItem] = newValue 的效果，同時也將觸發狀態更新：

// Vue.setVue.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>