vueデータ双方向バインドの原理
5900 ワード
まず、データの双方向バインドとは何かを簡単に説明します.データの双方向バインド、すなわち、データが変化すると、ビューも変化し、ビューが変化すると、データも同期して変化します.
vueが双方向データバインドを実現する原理は、オブジェクトが属性値
コードプレゼンテーション
コードプレゼンテーション
vueが双方向データバインドを実現する原理は、オブジェクトが属性値
Object.defineProperty()
を取得し、属性値get
を設定する操作をset
と再定義することによって実現される.コードプレゼンテーション
defineProperty
の使用方法:// :
var obj = {};
// :
var name;
// :
Object.defineProperty(obj, "data", {
//
get: function() {
return name;
},
//
set: function(val) {
name = val;
console.log(val);
}
})
// : set
obj.data = 'abc';
// : get
console.log(obj.data);
コードプレゼンテーション
defineProperty
の双方向バインド:var obj = {};
Object.defineProperty(obj, 'val',{
set: function(newVal) {
// dom id input , id div
document.getElementById("input").value = newVal == undefined ? '' : newVal;
document.getElementById("div").innerHTML = newVal == undefined ? '' : newVal;
}
});
//
document.getElementById("input").addEventListener("keyup",function(e) {
obj.val = e.target.value;
})