vue改變對象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)
Vue數(shù)據(jù)響應(yīng)原理
官方的解釋很清晰：
當(dāng)你把一個(gè)普通的 JavaScript 對象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是ES5 中一個(gè)無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。 用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時(shí)通知變化。這里需要注意的問題是瀏覽器控制臺在打印數(shù)據(jù)對象時(shí) getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。 每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。
總結(jié)：
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ù)制出一份新的，修改后整體賦值，---可觸發(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ù)制出一份新的，修改后整體賦值，---可觸發(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']);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過程詳解
文件上傳是我們在開發(fā)Web應(yīng)用時(shí)經(jīng)常遇到的功能之一,為了提升用戶體驗(yàn),我們可以利用HTML5的拖放API來實(shí)現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-12-12
vue項(xiàng)目中自動導(dǎo)入svg并愉快的使用方式
這篇文章主要介紹了vue項(xiàng)目中自動導(dǎo)入svg并愉快的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
后端寫個(gè)上傳圖片的接口可不是很簡單，只需要讓這個(gè)字段限制為圖片格式，后臺做個(gè)保存的邏輯就完事了，前端處理還要牽扯到請求頭，數(shù)據(jù)格式的處理等等問題，按照老傳統(tǒng)把圖片按照字符串往接口put發(fā)現(xiàn)返回的全是400錯誤，直到我知道了前端的FormData方法！2021-05-05
vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了在antd4.0中Form使用initialValue操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參代碼示例
最近外部公司的app要接入我司的uni H5項(xiàng)目,所以這篇文章主要給大家介紹了關(guān)于uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參的相關(guān)資料,需要的朋友可以參考下2024-04-04
vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解，有興趣的朋友們可以參考下。2020-05-05
vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
在Vue的模板語法中,我們學(xué)了很多指令,當(dāng)然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來和大家聊聊如何使用自定義指令吧2023-10-10
使用Vue綁定class和style樣式的幾種寫法總結(jié)
這篇文章主要介紹了使用Vue綁定class和style樣式的幾種寫法，文章通過代碼示例介紹的非常詳細(xì)，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07