最近在使用Vue開發(fā)一個項(xiàng)目的時候發(fā)現(xiàn)了一些奇怪的問題，比如修改數(shù)據(jù)時頁面卻沒有響應(yīng)。檢查過代碼沒有問題，Google了解了一下才知道這是Vue響應(yīng)式系統(tǒng)出現(xiàn)了問題。

const obj = {
name: 'Tom',
age: 18
}
new Vue({
data() {
return {
info: obj
}
}
})
obj.age = 20 // 這里修改obj的屬性值，但是頁面沒有響應(yīng)

Vue在進(jìn)行數(shù)據(jù)綁定時，會使用Object.defineProperty()對對象的屬性進(jìn)行劫持。每個屬性在get時收集依賴，在set時通知依賴更新。但是這樣的劫持無法監(jiān)視到對象新增屬性或者刪除屬性的變化。

const obj = {
name: 'Tom',
age: 18
}
new Vue({
data() {
return {
info: obj
}
}
})
this.info.gender = 'male' // 這里增加了一個gender屬性，但是頁面沒有響應(yīng)

解決方法很簡單，只需要在初始化Vue實(shí)例時使用Vue.set()或者this.$set()對對象進(jìn)行屬性設(shè)置。這樣新加屬性才會被Vue響應(yīng)式系統(tǒng)監(jiān)視到。

const obj = {
name: 'Tom',
age: 18
}
new Vue({
data() {
return {
info: obj
}
}
})
this.$set(this.info, 'gender', 'male') // 向info對象添加gender屬性

但是這樣的解決方法只能解決對象新增屬性的問題，如果想要刪除對象的屬性，則需要使用Vue.delete()或者this.$delete()。

const obj = {
name: 'Tom',
age: 18,
gender: 'male'
}
new Vue({
data() {
return {
info: obj
}
}
})
this.$delete(this.info, 'gender') // 刪除info對象的gender屬性

值得一提的是，上述的問題只是針對對象，對于數(shù)組也存在類似的問題。同樣的，修改數(shù)組的下標(biāo)和長度無法被Vue監(jiān)視到，需要使用Vue.set()和Vue.delete()。

const arr = ['Tom', 'Jerry', 'Mike']
new Vue({
data() {
return {
list: arr
}
}
})
Vue.set(this.list, 1, 'Jack') // 把第一個元素改為Jack
Vue.delete(this.list, 2) // 刪除第二個元素

在使用Vue進(jìn)行開發(fā)的過程中，這些問題不可避免的會出現(xiàn)。因此了解Vue的響應(yīng)式系統(tǒng)以及掌握常用的解決方法是很有必要的。