在日常開發中,我們用的最多的就是 綁定數據
<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>
Vue提供瞭如下的數組的變異方法,可以觸發視圖更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
//
介紹一個全棧開發交流學習圈,歡迎加入Q羣:864305860
在日常開發中,我們用的最多的就是 綁定數據
<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>
Vue提供瞭如下的數組的變異方法,可以觸發視圖更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
//
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
加入我們一起聊天吹水學習
爲了幫助大家讓學習變得輕鬆、高效,大家可以加入我們交流圈子吹水學習交流:619586920歡迎大家進羣交流討論,學習交流,共同進步。