新聞中心
Vue數(shù)據(jù)響應原理
10年積累的網(wǎng)站設計制作、成都做網(wǎng)站經(jīng)驗,可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你,你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程,更有黎川免費網(wǎng)站建設讓你可以放心的選擇與我們合作。
官方的解釋很清晰:
當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項,Vue 將遍歷此對象所有的屬性,并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是ES5 中一個無法 shim 的特性,這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。 用戶看不到 getter/setter,但是在內部它們讓 Vue 追蹤依賴,在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數(shù)據(jù)對象時 getter/setter 的格式化并不同,所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。 每個組件實例都有相應的 watcher 實例對象,它會在組件渲染的過程中把屬性記錄為依賴,之后當依賴項的 setter 被調用時,會通知 watcher 重新計算,從而致使它關聯(lián)的組件得以更新。
總結:
1.數(shù)組更改值或者增加刪除值,不會觸發(fā)更新。
2.對象更改值可觸發(fā)更新,增加或者刪除屬性不會觸發(fā)更新。
3.對象數(shù)組:數(shù)組中的對象更改值會觸發(fā)更新。
一、純數(shù)組-------showArr:[true,true]
數(shù)組中元素直接賦值,---不觸發(fā)刷新
this.showArr[0]=!this.showArr[0];
數(shù)組修改后整體賦值,---不觸發(fā)刷新
var parr=this.showArr; parr[0]=!parr[0]; this.showArr=parr;
數(shù)組重新復制出一份新的,修改后整體賦值,---可觸發(fā)刷新
var parr=this.showArr.slice(0); parr[0]=!parr[0]; this.showArr=parr;
用$set賦值,---可觸發(fā)刷新
this.$set(this.showArr,0,!this.showArr[0])
二、純對象-------showArr:{'showBool':true}
對象中元素直接賦值,---可觸發(fā)刷新
this.showArr['showBool']=!this.showArr['showBool'];
對象修改后整體賦值,---可觸發(fā)刷新
var parr=this.showArr; parr['showBool']=!parr['showBool']; this.showArr=parr;
用$set賦值,---可觸發(fā)刷新
this.$set(this.showArr,'showBool',!this.showArr['showBool']);
三、 對象數(shù)組-------showArr:[{'showBool':true},{'showBool':true}]
數(shù)組中元素直接賦值,---可觸發(fā)刷新
this.showArr[0]['showBool']=!this.showArr[0]['showBool'];
數(shù)組修改后整體賦值,---可觸發(fā)刷新
var parr=this.showArr; parr[0]['showBool']=!parr[0]['showBool']; this.showArr=parr;
數(shù)組重新復制出一份新的,修改后整體賦值,---可觸發(fā)刷新
var parr=this.showArr.slice(0); parr[0]['showBool']=!parr[0]['showBool']; this.showArr=parr;
用$set賦值,---可觸發(fā)刷新
this.$set(this.showArr[0],'showBool',!this.showArr[0]['showBool']);
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站標題:vue改變對象或數(shù)組時的刷新機制的方法總結
網(wǎng)頁URL:http://fisionsoft.com.cn/article/jsojpi.html