vue響應式原理

vue作為乙個mvvm框架，是如果對資料屬性實現響應式的呢？通過深入研究，發現它是通過object.defineproperty(只支援純物件)繫結get,set來實現的，下面就來**一下其中的原理。

/**
* @param obj 目標物件
* @param prop 目標物件的屬性
* @param descriptor [屬性描述符：資料描述符和訪問描述符兩種形式]
*/var obj = {};
var descriptor = object.create(null) // 沒有繼承的屬性
// 預設沒有enumerable,沒有configurabel,沒有writeable
descriptor.value = 'static';
object.defineporperty(obj, 'key', descriptor);
// 屬性描述符
object.defineporperty(obj, 'key', )
// 訪問描述符
var bvalue
object.defineproperty(obj, 'key', ,
set: function(newvalue) ,
eumerable: true,
configurable: true
})

vue在denfineproperty的方法上進行進一步的封裝

function definereactive(data,key,value) ,
set: function(newvalue) ,
eumerable: true,
writeable: true
})}

我們之所以要觀察observer，是為了當資料屬性發生變化的時候，通知那些使用到該屬性的地方。

這要我們就可以先把所有使用到該屬性依賴全部收集起來，當屬性改變的時候，迴圈通知所有的屬性依賴進行更新

在definereative的基礎上進一步實現

/**
* [definereactive description]
* @param data [物件obj]
* @param key [物件屬性]
* @param value [物件屬性的值]
* @return [description]
*/function definereactive(data,key,value) ,
set: function(newvalue) 
value = newvalue}})
}// 進一步把收集依賴的部分封裝起來
class dep 
addsub(sub: watcher) 
removesub(sub: watcher) 
depend() 
} notify() 
}}// 修改後的**
function definereactive(data,key,value) ,
set: function(newvalue) 
})}

總結：要觀察就要收集依賴到dep用於專門儲存依賴, 上面我們將所有儲存到dep陣列的叫做watcher。致這些watcher依賴是在vue中的templete,watch,computed中都要是收集的，當資料改變的時候就去通知到這些地方，這樣就需要抽象出乙個能夠處理不同情況的類，然後我們在依賴收集的時候只需要收集這些封裝好的類進來，通知也是通知到它乙個，然後它負責通知其他地方使用到該屬性的地方，這個類我們叫它watcher

class watcher 
get() 
update() 
}

上面的**就是乙個完整的乙個watcher,所做的事情就是獲取和更新要用到的屬性

至此，單個屬性監測響應的整個過程就實現了，對於多個屬性的監測**實現如下,遍歷物件的所有屬性

function observe(obj) 
}function definereactive(data,key,value) ,
set: function(newvalue) 
})}

vue響應式原理

vue響應式布局 Vue 響應式原理

vue響應式原理

vue響應式原理

相關推薦