使用vue雙向綁定的時候，有時候會遇到?jīng)]有檢測到數(shù)據(jù)變化的情況，以下情況，是需要在平常工作和使用中注意的問題
數(shù)組盲區(qū)
vue包含一組觀察數(shù)組變異的方法，使用這些方法也會觸發(fā)視圖更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
但是受到某些限制，vue無法檢測到以下數(shù)組變動(視圖不會更新)
<template>
<div>
<button @click="event">click</button>
{{items}}
</div>
</template>
<script>
export default {
data() {
return {
items: ['a', 'b', 'c']
}
},
methods: {
event() {
this.items[1] = 'x' // 不是響應式的
this.items.length = 2 // 不是響應式的
console.log(this.items)
}
}
}
</script>
image.png
為了解決這個問題，需要使用$set
<template>
<div>
<button @click="event">click</button>
{{items}}
</div>
</template>
<script>
export default {
data() {
return {
items: ['a', 'b', 'c']
}
},
methods: {
event() {
// this.items[1] = 'x'
// this.items.length = 2
this.$set(this.items, 1, 'x')
this.items.splice(2)
console.log(this.items)
}
}
}
</script>
image.png
對象盲區(qū)
vue不能檢測對象屬性的添加和刪除
<template>
<div>
<button @click="event">click</button>
{{items}}
</div>
</template>
<script>
export default {
data() {
return {
items: {
a: 1 // 是響應式的
}
}
},
methods: {
event() {
this.items.b = 2 // 不是響應式的
console.log(this.items)
}
}
}
</script>
image.png
這里有兩種解決方法
- 在data聲明時，就給出b: ''的聲明
<template>
<div>
<button @click="event">click</button>
{{items}}
</div>
</template>
<script>
export default {
data() {
return {
items: {
a: 1 // 是響應式的
}
}
},
methods: {
event() {
this.$set(this.items, 'b', 2) // 是響應式的
console.log(this.items)
}
}
}
</script>
image.png
當你想添加多個新屬性到某個對象上時，也可以利用Object.assign()，但是不要直接給this.yourObject添加，例如
// 此時也不是響應的
Object.assign(vm.items, {
c: 3
})
可以直接賦值給原有對象
// 此時是響應式的
this.items = Object.assign({}, this.items, {
v: 3
})
