Vue響應(yīng)式原理深入解析及注意事項

更新時間：2017年12月11日 15:00:05 作者：miko

Vue 最顯著的一個功能是響應(yīng)系統(tǒng) —— 模型只是普通對象，修改它則更新視圖。下面這篇文章主要給大家深入講解了關(guān)于Vue的響應(yīng)式原理，以及Vue響應(yīng)式的一些注意事項，需要的朋友下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

Vue最明顯的特性之一便是它的響應(yīng)式系統(tǒng)，其數(shù)據(jù)模型即是普通的 JavaScript 對象。而當(dāng)你讀取或?qū)懭胨鼈儠r，視圖便會進行響應(yīng)操作。文章簡要闡述下其實現(xiàn)原理，如有錯誤，還請不吝指正。下面話不多說了，來隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

響應(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ù)值的位置，在此位置可以進行讀寫操作，有以下特性：

[[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() 方法對新值進行操作。
 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ù)，進行操作。
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)的組件得以更新。

如下圖所示：