vue資料雙向繫結理解析(get & set)

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

前端的資料雙向繫結指的是view(檢視)和model(資料)兩者之間的關係;view層是頁面上展示給使用者看的資訊,model層一般是指通過http請求從後臺返回的資料。view到model的繫結都是通過事件回撥函式操作的,model到view的繫結有多種方法。

angular,react,vue等mv*模式的框架都實現了資料雙向繫結;angular是通過髒檢查即新老資料的比較來確定哪些資料發生了變化,從而將它更新到view中;vue則是通過設定資料的get和set函式來實現的,這種方式在效能上是優於angular的。

下面程式碼是一個簡單的定義資料get和set方法的例子,set和get方法分別在資料改變和訪問的時候被呼叫,能夠監聽資料的變化:


// 資料繫結的建構函式
function Observer(data) {
this.data = data;
for(var key in data) {
if(data.hasOwnProperty(key)) {
var val = data[key];
if(typeof data[key] === "object"){
// 如果值不為原始型別,則繼續遞迴
new Observer(val);
}else {
this.convert(key, val);
}
}
}
}
// 定義set 和 get函式
Observer.prototype.convert = function(key, val) {
Object.defineProperty(this.data, key, {
enumerable: true,
confingurable: true,
get: function() {
console.log(key   "被訪問了");
return val;
},
set: function(newVal) {
console.log(key   "被設定了新值"   newVal);
val = newVal;
}
});
}
var app = new Observer({name: "xieshuai", age: 24, address: {city: "shenzheng"}});
app.data.name;  // name被訪問了
app.data.age = 18; // age被設定了新值18

Object.defineProperty,這是ES6新增的方法,通過這個方法,可以自定義getter和setter函式。

上面的程式碼只是個簡單的例子,並沒有處理陣列的情況;不過這是vue實現資料雙向繫結的核心。

本文到此結束,文中若有不對之處,還望指正。

相關文章

前端開發 最新文章