Vue 的響應式系統原理

Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。

當你把javascript對象傳給vue實例的data屬性的時候，Vue 將遍歷此對象所有的屬性，通過 Object.defineProperty 來給每個屬性都添加 getter 和 setter.

而每個組件實例又都有一個watcher對象,它會將組件渲染過程中的屬性渲染為【依賴】,當數據發生變化的時候，會觸發setter，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

一、Object.defineProperty

Object.defineProperty() 方法直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性， 并返回這個對象。

Object.defineProperty(obj, prop, descriptor)

參數

• obj 需要定義屬性的對象。
• prop 需被定義或修改的屬性名。
• descriptor 需被定義或修改的屬性的描述符。

Object.defineProperty(obj, "key", {enumerable: false, // 不可枚舉configurable: false, // 不可更改writable: false, // 不可被賦值運算符改變value: "static" })// 創建屬性 var o = {};Object.defineProperty(o, 'a', {enumerable: true,configurable: true,writable: true,value: 17 });// 對象o擁有了屬性a，值為17 var bValue = 38; Object.defineProperty(o, 'b', {get: function() { return bValue; },set: function(newValue) { bValue = newValue; },enumerable: true,configurable: true }); o.b; // 38

• Writable 屬性

var o = {}; // 創建一個新對象Object.defineProperty(o, "a", { value : 37,writable : false });console.log(o.a); // 打印 37 o.a = 25; // 沒有錯誤拋出（在嚴格模式下會拋出，即使之前已經有相同的值） console.log(o.a); // 打印 37， 賦值不起作用。

• Enumerable 特性

var o = {}; Object.defineProperty(o, "a", { value : 1, enumerable:true }); Object.defineProperty(o, "b", { value : 2, enumerable:false }); Object.defineProperty(o, "c", { value : 3 }); // enumerable defaults to false o.d = 4; // 如果使用直接賦值的方式創建對象的屬性，則這個屬性的enumerable為truefor (var i in o) { console.log(i); } // 打印 'a' 和 'd' (in undefined order)Object.keys(o); // ["a", "d"]o.propertyIsEnumerable('a'); // true o.propertyIsEnumerable('b'); // false o.propertyIsEnumerable('c'); // false

• Configurable 特性

configurable 特性表示對象的屬性是否可以被刪除，以及除 writable 特性外的其他特性是否可以被修改。

Object.defineProperty(person,'a',{configurable:false,//為false的時候不允許修改默認屬性了 }) =============================== # 改為false之后再試試修改其他屬性 Object.defineProperty(person,'a',{configurable:true,enumerable:true,writable:true,value:1 }) //woa,控制臺直接報錯了!連想把false值改回true都不行!也就是說,這個改動是一次性了! //也就是說,你可以使用Object.defineProperty()方法無限修改同一個屬性,但是當把configurable改為false之后就有限制了

---

1 、首先定義一個cb函數，這個函數用來模擬試圖更新。

// function cb (val) {/* 渲染視圖 */console.log("視圖更新啦～"); }

2、 定義一個defineReactive ，這個方法通過 Object.defineProperty 來實現對對象的「響應式」化，入參是一個 obj（需要綁定的對象）、key（obj的某一個屬性），val（具體的值）。

function defineReactive(obj, key, val){Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function(){return val;},set:function(newVal) {if (newVal === val) return;cb(newVal);}}) } // 當一個對象，賦值給Vue實力的data選項的時候，就會觸發該操作，對數據進行響應化處理

3、 當然這是不夠的，我們需要在上面再封裝一層 observer 。這個函數傳入一個 value（需要「響應式」化的對象），通過遍歷所有屬性的方式對該對象的每一個屬性都通過 defineReactive 處理。

function observer(val) {if(!val || typeof val != 'object') {return ;}Object.keys(val).forEach((key)=> {defineReactive(val,key, val[key]);}) }

4、 在 Vue 的構造函數中，對 options 的 data 進行處理

class Vue {/* Vue構造類 */constructor(options) {this._data = options.data;observer(this._data);} }

5、 這樣我們只要 new 一個 Vue 對象，就會將 data 中的數據進行「響應式」化。如果我們對 data 的屬性進行下面的操作，就會觸發 cb 方法更新視圖。

總結

以上是生活随笔為你收集整理的Vue 进阶 （二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。