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