vue 關於數組和對象的更新
阿新 • • 發佈:2018-11-03
mod erp clas $set push 刪除 方法 但是 響應式
在日常開發中,我們用的最多的就是 綁定數據
<div v-for="item in data" :key="item.id">
<!-- 內容 -->
</div>
如果你有ng的開發經驗,假設 data 你要更新數據了
this.data=res.data;
但是這在vue中 並不會起到作用,DOM並沒有觸發變化。
vue不是已經實現的實時數據雙向綁定,那麽model層發生了變化之後,為什麽view層沒有更新呢???
看官網 這裏才發現 深入響應式原理 列表渲染
vue 關於數組和對象的更新
數組檢測更細變異的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
註意事項
由於 JavaScript 的限制,Vue 不能檢測以下變動的數組:
- this.data[index] = res.data;
- this.data.length = 0;
正確的操作方式
- Vue.$set(this.data, 1, {name:"huangenai",age:"22"})
- 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()
原文地址:https://segmentfault.com/a/1190000016776227
vue 關於數組和對象的更新