Vue響應式原理深入解析

vue最明顯的特性之一便是響應式系統，其資料模型即是普通的 j**ascript 物件。而當你讀取或寫入它們時，檢視便會進行響應操作。

響應式data：

<
div 
id = "exp"
>}
div>
const vm = new vue(
})vm.message = 'this is b' // 響應式
vm._message = 'this is c' // 非響應式

上述**中，data是vue例項的資料物件，當例項初始化時，vue 會遍歷 data 中的所有屬性，並且使用 object.definepropery 把這些屬性全都轉為 getter/setter ，從而讓 data 的屬性能夠響應資料變化。另外，object.defineproperty 是 es5 中乙個無法 shim(墊片) 的特性。物件必須是純粹的物件 (含有零個或多個的 key/value 鍵值對)：瀏覽器 api 建立的原生物件。所以，在data中宣告過的message是響應式資料，而由於_message是在data外使用 vue 例項增加的資料，所以亦不屬於響應式。

關於object.definepropery

object.defineproperty()方法會直接在乙個物件上定義乙個新屬性，或者修改乙個物件的現有屬性，並返回這個物件。它是實現響應式資料的關鍵所在。

obj: 要定義屬性的物件

prop: 要定義或修改的屬性的名稱

descriptor: 將被定義或修改的屬性描述符。

注：要知道ecmascript中有兩種屬性：資料屬性和訪問器屬性。這裡的descriptor可取值有資料屬性和訪問器屬性。

資料屬性：包含乙個資料值的位置，在此位置可以進行讀寫操作，有以下特性：

[[configurable]]：對屬性的操作可配置性開關，如刪除，修改。預設值為true。

[[enumberble]]：是否可列舉（通過for-in）。預設值為true。

[[writable]]：能否修改屬性的值。預設值為true。

[[value]]：包含這個屬性的資料值，讀取時從該位置讀，寫入時把新值存到該位置。預設值為undefined。

訪問器屬性：不包含資料值，包含乙個函式對（getter/setter）。特性如下：

[[configurable]]：對屬性的操作可配置性開關，如刪除，修改。預設值為true。

[[enumberble]]：是否可列舉（通過for-in）。預設值為true。

[[get]]：讀取屬性時呼叫的函式。預設值為undefined。

[[set]]：寫入屬性時呼叫的函式。預設值為undefined。

注：在讀取訪問器屬性時，就會呼叫getter函式，該函式負責返回有效的值；在寫入訪問器屬性時，會呼叫setter函式並傳入新值，該函式負責決定如何處理資料，但是這兩個函式不一定非要同時存在。vue便是利用getter/setter這一特性來實現的響應系統。

示例：

// 定義乙個book物件，_year和edition都屬於資料屬性。
var book = ;
// 對book物件建立 year 訪問器屬性。
object.defineproperty(book, "year",,
// 寫入 year 訪問器屬性時，set() 方法對新值進行操作。
set : function (newvalue) 
}});
// 讀取 year 訪問器屬性時會返回_year的值。
book.year;
// 寫入 year 訪問器屬性時會呼叫set() 函式，進行操作。
book.year = 2005; 
console.info(book.edition) // 2
console.info(book)

watcher：

每個元件例項都有相應的 watcher 例項物件，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被呼叫時，會通知 watcher 重新計算，從而致使它關聯的元件得以更新。

注：模板中每個指令/資料繫結都有乙個對應的 watcher 物件。其中 watcher扮演的角色相當於紐帶，這個紐帶的作用就是收集依賴。

變化檢測

1·vue不能檢測物件屬性的新增或刪除，因此屬性必須在data物件上，但是可以使用vue.set(object,key,value)來將響應屬性新增到物件上（vm.$set例項方法vue.set全域性方法）。

2.使用(object.assign()或者_.extend())方法新增屬性，不會觸發更新，這時建議使用oldobject=object.assign({},oldobject,)

3.vue不允許動態新增根級響應式屬性，所有初始例項必須宣告（空值也需要）

4.在資料變化之後立即使用vm.$nexttick(calllback)實現在dom更新後操作

Vue響應式原理深入解析

vue深入響應式原理

vue深入響應式原理

vue響應式原理解析

Vue響應式原理深入解析

vue深入響應式原理

vue深入響應式原理

vue響應式原理解析

相關推薦