關(guān)于數(shù)組
-
使用數(shù)組變異方法
對Vue實例中data里面的數(shù)組使用變異方法操作的時候，Vue可以檢測到變化并進(jìn)行更新變異方法包括
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
-
非變異方法
非變異方法因為不會直接改變原始數(shù)組，所以需要使用另外的方法，比如用新數(shù)組去替換原數(shù)組乏沸。用含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作
var example1 = new Vue({ el: 'example1' data:{ items:[ {message:'Foo'}, {message:'Baz'} ] } }) example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })
兩個錯誤的例子和對應(yīng)的正確的方法
-
使用
example1.items[0] = newValue這樣的方法來改變數(shù)組，改變的值不具有響應(yīng)特性爪瓜，正確的方法是Vue.set(example1.items, 0, newValue)或者
example1.items.splice(0, 1, newValue) -
使用
example1.items.length = newLength的方法改變數(shù)組的長度，Vue也無法檢測到變化匙瘪，正確的方法是example1.items.splice(newLength)
關(guān)于對象
Vue不能動態(tài)添加根級響應(yīng)式屬性铆铆，也不能檢測根級屬性中屬性的添加或刪除，這部分內(nèi)容丹喻，看VUE數(shù)據(jù)data更新而列表不更新薄货，VUE的響應(yīng)式原理的幾個小例子
-
既然不能添加根級屬性，那我們就把需要動態(tài)添加的屬性嵌套在已有的根級屬性里面碍论，通用使用set方法
var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } } }) Vue.set(example1.items, 'age', 27)效果相同的另一種寫法谅猾，在Vue實例內(nèi)使用
var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { this.$set(this.items, 'age', 27) } } }) -
如果需要添加的屬性很多，那就可以使用對象替換的方法鳍悠，這種方法在上面的數(shù)組的方法中也用過
var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { this.items = Object.assign({}, this.items, { age: 27, favoriteColor: 'Vue Green' }) } } })這里要注意的地方是：一定要是對此對象的整體替換税娜，直接操作添加的屬性不具備響應(yīng)特性
直接操作的例子
var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { Object.assign(this.userProfile, { age: 27, favoriteColor: 'Vue Green' }) } } })?
