這篇文章主要介紹Vue響應(yīng)式的注意事項有哪些,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:域名申請、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、和布克賽爾蒙古網(wǎng)站維護(hù)、網(wǎng)站推廣。響應(yīng)式data
<div id = "exp">{{ message }}</div> const vm = new Vue({ el: '#exp', data: { message: 'This is A' } }) vm.message = 'This is B' // 響應(yīng)式 vm._message = 'This is C' // 非響應(yīng)式
上述代碼中,data是Vue實例的數(shù)據(jù)對象,當(dāng)實例初始化時,Vue 會遍歷 data 中的所有屬性,并且使用 Object.definePropery 把這些屬性全都轉(zhuǎn)為 getter/setter ,從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。另外,Object.defineProperty 是 ES5 中一個無法 shim(墊片) 的特性,這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。對象必須是純粹的對象 (含有零個或多個的 key/value 鍵值對):瀏覽器 API 創(chuàng)建的原生對象。所以,在data中聲明過的message是響應(yīng)式數(shù)據(jù),而由于_message是在data外使用 Vue 實例增加的數(shù)據(jù),所以亦不屬于響應(yīng)式。
關(guān)于Object.definePropery
Object.defineProperty()
方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現(xiàn)有屬性,并返回這個對象。這個API是實現(xiàn)響應(yīng)式數(shù)據(jù)的關(guān)鍵所在。
Syntax: Object.defineProperty(obj, prop, descriptor)
obj: 要定義屬性的對象
prop: 要定義或修改的屬性的名稱
descriptor: 將被定義或修改的屬性描述符。
Tips: 要知道ECMAScript中有兩種屬性:數(shù)據(jù)屬性和訪問器屬性。這里的descriptor可取值有數(shù)據(jù)屬性和訪問器屬性。
數(shù)據(jù)屬性: 包含一個數(shù)據(jù)值的位置,在此位置可以進(jìn)行讀寫操作,有以下特性:
[[Configurable]]:對屬性的操作可配置性開關(guān),如刪除,修改。默認(rèn)值為true。
[[Enumberble]]:是否可枚舉(通過for-in)。默認(rèn)值為true。
[[Writable]]:能否修改屬性的值。默認(rèn)值為true。
[[value]]:包含這個屬性的數(shù)據(jù)值,讀取時從該位置讀,寫入時把新值存到該位置。默認(rèn)值為undefined。
訪問器屬性: 不包含數(shù)據(jù)值,包含一個函數(shù)對(getter/setter)。特性如下:
[[Configurable]]:對屬性的操作可配置性開關(guān),如刪除,修改。默認(rèn)值為true。
[[Enumberble]]:是否可枚舉(通過for-in)。默認(rèn)值為true。
[[Get]]:讀取屬性時調(diào)用的函數(shù)。默認(rèn)值為undefined。
[[Set]]:寫入屬性時調(diào)用的函數(shù)。默認(rèn)值為undefined。
Tips: 在讀取訪問器屬性時,就會調(diào)用getter函數(shù),該函數(shù)負(fù)責(zé)返回有效的值;在寫入訪問器屬性時,會調(diào)用setter函數(shù)
并傳入新值,該函數(shù)負(fù)責(zé)決定如何處理數(shù)據(jù),但是這兩個函數(shù)不一定非要同時存在。Vue便是利用getter/setter這一特性來實現(xiàn)的響應(yīng)系統(tǒng)。
示例代碼:
// 定義一個book對象,_year和edition都屬于數(shù)據(jù)屬性。 var book = { _year : 2004, edition : 1 }; // 對book對象創(chuàng)建 year 訪問器屬性。 Object.defineProperty(book, "year",{ // 讀取 year 訪問器屬性時,get() 方法返回 _year 的值。 get : function () { console.info(this._year, 'get'); // 2004 return this._year; }, // 寫入 year 訪問器屬性時,set() 方法對新值進(jìn)行操作。 set : function (newValue) { if (newValue > 2004) { this._year = newValue; console.info(this._year, 'set') // 2005 this.edition += newValue - 2004; } } }); // 讀取 year 訪問器屬性時會返回_year的值。 book.year; // 寫入 year 訪問器屬性時會調(diào)用set() 函數(shù),進(jìn)行操作。 book.year = 2005; console.info(book.edition) // 2 console.info(book) // 此處藏有彩蛋。
watcher
官方表述:每個組件實例都有相應(yīng)的 watcher 實例對象,它會在組件渲染的過程中把屬性記錄為依賴,之后當(dāng)依賴項的 setter 被調(diào)用時,會通知 watcher 重新計算,從而致使它關(guān)聯(lián)的組件得以更新。
如下圖所示:
Tips:模板中每個指令/數(shù)據(jù)綁定都有一個對應(yīng)的 watcher 對象。其中 watcher扮演的角色相當(dāng)于是一個紐帶,這個紐帶的作用就是依賴收集。
變化檢測
1·(Object.observe的廢棄),Vue不能檢測對象屬性的添加或刪除,因此屬性必須在data對象上,但是可以使用Vue.set(Object,key,value)
來將響應(yīng)屬性添加到對象上 (vm.$set
實例方法Vue.set
全局方法)。
2.使用(Object.assign()
或者_.extend()
)方法添加屬性,不會觸發(fā)更新,這時3建議使用oldobject=Object.assign({},oldobject,{key1:value1,key2:value2})
3.Vue不允許動態(tài)添加 根級響應(yīng)式屬性,所有初始實例必須聲明(空值也需要)
4.在數(shù)據(jù)變化之后立即使用 vm.$nextTick(calllback)
實現(xiàn)在Dom更新后操作
文中還有部分深層細(xì)節(jié)沒有講述到,后續(xù)我也會接著更新系列文章來進(jìn)一步深深深究vue底層的響應(yīng)式原理,SYNT。
以上是“Vue響應(yīng)式的注意事項有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
標(biāo)題名稱:Vue響應(yīng)式的注意事項有哪些-創(chuàng)新互聯(lián)
文章路徑:http://m.rwnh.cn/article10/cssjdo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、網(wǎng)站營銷、外貿(mào)建站、服務(wù)器托管、App開發(fā)、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容