vue 中使用引用型別的注意事項
阿新 • • 發佈:2018-12-15
前言
js 中物件Object
、陣列Array
都是引用型別。
- 引用型別
當用變數宣告一個引用型別時,實際上這個變數不是引用型別本身,而是一個指向這個引用型別的指標。var a={name:'tom'}; var b=a; a={}; console.log(b.name) //tom
Vue 不能檢測以下變動的陣列:
- 當你利用索引直接設定一個項時,例如:vm.items[indexOfItem] = newValue
- 當你修改陣列的長度時,例如:vm.items.length = newLength
文件是這麼說的,不知道是不是因為是引用型別的原因,這個等待考究原始碼
var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的
為了解決第一類問題,以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果,同時也將觸發狀態更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
為了解決第二類問題,你可以使用 splice:
vm.items.splice(newLength)
Vue 不能檢測物件屬性的新增或刪除:
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 現在是響應式的 vm.b = 2 // `vm.b` 不是響應式的
對於已經建立的例項,Vue 不能動態新增根級別的響應式屬性。但是,可以使用 Vue.set(object, key, value) 方法向巢狀物件新增響應式屬性。例如,對於:
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile, 'age', 27)
有時你可能需要為已有物件賦予多個新屬性,比如使用 Object.assign()
或 _.extend()。在這種情況下,你應該用兩個物件的屬性建立一個新的物件。所以,如果你想新增新的響應式屬性,不要像這樣:
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你應該這樣做:
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})