Vue響應(yīng)式的注意事項(xiàng)有哪些

這篇文章主要介紹Vue響應(yīng)式的注意事項(xiàng)有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司主營(yíng)眉山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),眉山h5成都微信小程序搭建,眉山網(wǎng)站營(yíng)銷推廣歡迎眉山等地區(qū)企業(yè)咨詢

響應(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í)例的數(shù)據(jù)對(duì)象，當(dāng)實(shí)例初始化時(shí)，Vue 會(huì)遍歷 data 中的所有屬性，并且使用 Object.definePropery 把這些屬性全都轉(zhuǎn)為 getter/setter ，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。另外，Object.defineProperty 是 ES5 中一個(gè)無(wú)法 shim(墊片) 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。對(duì)象必須是純粹的對(duì)象 (含有零個(gè)或多個(gè)的 key/value 鍵值對(duì))：瀏覽器 API 創(chuàng)建的原生對(duì)象。所以，在data中聲明過(guò)的message是響應(yīng)式數(shù)據(jù)，而由于_message是在data外使用 Vue 實(shí)例增加的數(shù)據(jù)，所以亦不屬于響應(yīng)式。

關(guān)于Object.definePropery

Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回這個(gè)對(duì)象。這個(gè)API是實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的關(guān)鍵所在。

Syntax: Object.defineProperty(obj, prop, descriptor)

obj: 要定義屬性的對(duì)象
prop: 要定義或修改的屬性的名稱
descriptor: 將被定義或修改的屬性描述符。

Tips：要知道ECMAScript中有兩種屬性：數(shù)據(jù)屬性和訪問(wèn)器屬性。這里的descriptor可取值有數(shù)據(jù)屬性和訪問(wèn)器屬性。

數(shù)據(jù)屬性：包含一個(gè)數(shù)據(jù)值的位置，在此位置可以進(jìn)行讀寫操作，有以下特性：

[[Configurable]]：對(duì)屬性的操作可配置性開關(guān)，如刪除，修改。默認(rèn)值為true。
[[Enumberble]]：是否可枚舉（通過(guò)for-in）。默認(rèn)值為true。
[[Writable]]：能否修改屬性的值。默認(rèn)值為true。
[[value]]：包含這個(gè)屬性的數(shù)據(jù)值，讀取時(shí)從該位置讀，寫入時(shí)把新值存到該位置。默認(rèn)值為undefined。

訪問(wèn)器屬性：不包含數(shù)據(jù)值，包含一個(gè)函數(shù)對(duì)（getter/setter）。特性如下：

[[Configurable]]：對(duì)屬性的操作可配置性開關(guān)，如刪除，修改。默認(rèn)值為true。
[[Enumberble]]：是否可枚舉（通過(guò)for-in）。默認(rèn)值為true。
[[Get]]：讀取屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined。
[[Set]]：寫入屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined。

Tips：在讀取訪問(wèn)器屬性時(shí)，就會(huì)調(diào)用getter函數(shù)，該函數(shù)負(fù)責(zé)返回有效的值；在寫入訪問(wèn)器屬性時(shí)，會(huì)調(diào)用setter函數(shù)

并傳入新值，該函數(shù)負(fù)責(zé)決定如何處理數(shù)據(jù)，但是這兩個(gè)函數(shù)不一定非要同時(shí)存在。Vue便是利用getter/setter這一特性來(lái)實(shí)現(xiàn)的響應(yīng)系統(tǒng)。

示例代碼：

// 定義一個(gè)book對(duì)象，_year和edition都屬于數(shù)據(jù)屬性。
var book = {
 _year : 2004,
 edition : 1
};
// 對(duì)book對(duì)象創(chuàng)建 year 訪問(wèn)器屬性。
Object.defineProperty(book, "year",{ 
 // 讀取 year 訪問(wèn)器屬性時(shí)，get() 方法返回 _year 的值。
 get : function () {
 console.info(this._year, 'get'); // 2004
 return this._year;
 },
 // 寫入 year 訪問(wèn)器屬性時(shí)，set() 方法對(duì)新值進(jìn)行操作。
 set : function (newValue) {
 if (newValue > 2004) {
 this._year = newValue;
 console.info(this._year, 'set') // 2005 
 this.edition += newValue - 2004;
 }
 }
});
// 讀取 year 訪問(wèn)器屬性時(shí)會(huì)返回_year的值。
book.year;
// 寫入 year 訪問(wèn)器屬性時(shí)會(huì)調(diào)用set() 函數(shù)，進(jìn)行操作。
book.year = 2005; 
console.info(book.edition) // 2
console.info(book) // 此處藏有彩蛋。

watcher

官方表述：每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

如下圖所示：

Vue響應(yīng)式的注意事項(xiàng)有哪些

Tips：模板中每個(gè)指令/數(shù)據(jù)綁定都有一個(gè)對(duì)應(yīng)的 watcher 對(duì)象。其中 watcher扮演的角色相當(dāng)于是一個(gè)紐帶，這個(gè)紐帶的作用就是依賴收集。

變化檢測(cè)

1·(Object.observe的廢棄)，Vue不能檢測(cè)對(duì)象屬性的添加或刪除，因此屬性必須在data對(duì)象上，但是可以使用Vue.set(Object,key,value) 來(lái)將響應(yīng)屬性添加到對(duì)象上（vm.$set 實(shí)例方法Vue.set全局方法）。

2.使用(Object.assign() 或者_.extend() )方法添加屬性，不會(huì)觸發(fā)更新，這時(shí)3建議使用oldobject=Object.assign({},oldobject,{key1:value1,key2:value2})

3.Vue不允許動(dòng)態(tài)添加根級(jí)響應(yīng)式屬性，所有初始實(shí)例必須聲明（空值也需要）

4.在數(shù)據(jù)變化之后立即使用 vm.$nextTick(calllback) 實(shí)現(xiàn)在Dom更新后操作

文中還有部分深層細(xì)節(jié)沒(méi)有講述到，后續(xù)我也會(huì)接著更新系列文章來(lái)進(jìn)一步深深深究vue底層的響應(yīng)式原理，SYNT。

以上是“Vue響應(yīng)式的注意事項(xiàng)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：Vue響應(yīng)式的注意事項(xiàng)有哪些
瀏覽地址：http://muchs.cn/article44/ipigee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站導(dǎo)航、標(biāo)簽優(yōu)化、電子商務(wù)、企業(yè)建站、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容