原文 https://www.cnblogs.com/huangenai/p/9836811.html
在日常開發中,我們用的最多的就是 綁定數據
<div v-for="item in data" :key="item.id"> <!-- 內容 --> </div>
如果你有ng的開發經驗,假設 data 你要更新數據了
this.data=res.data;
但是這在vue中 並不會起到作用,DOM並沒有觸發變化。
vue不是已經實現的實時數據雙向綁定,那麼model層發生了變化之後,爲什麼view層沒有更新呢???
數組檢測更細變異的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
注意事項
由於 JavaScript 的限制,Vue 不能檢測以下變動的數組:
1. this.data[index] = res.data;
2. this.data.length = 0;
正確的操作方式
1.
Vue.$set(
this
.data, 1, {name:"huangenai",age:"22"})
2. vm.items.splice(0)
對象
還是由於 JavaScript 的限制,Vue 不能檢測對象屬性的添加或刪除:
<script>
export default {
data(){
return {
userProfile: {
name: 'Anika'
}
user: {
name: "huangenai",
age: 12
}
}
},
mounted() {
this.$set(this.userProfile, 'age', 27)
this.user = Object.assign({}, this.user, {
age: 22,
name: "huangenai"
});
}
}
</script>