vue中數據雙向綁定的實現原理
阿新 • • 發佈：2017-09-14
.cn pre get ring arr config 設置 cto 進行
vue中最常見的屬v-model這個數據雙向綁定了，很好奇它是如何實現的呢？嘗試著用原生的JS去實現一下。
首先大致學習了解下Object.defineProperty()這個東東吧！
* Object.defineProperty() * 對對象的屬性進行 定義/修改 * */ let obj = {x:10} // 這兩種方式都相對來說比較簡單，直接，但是有些時候我們需要對對象的屬性的修改和增加進行必要的幹預 // obj.y = 20; // obj.x = 100; // obj.x = ‘abc‘;// // let arr = [1,2,3]; // arr.length = ‘abc‘;//不可更改 // console.log(arr); // console.log(obj.x); // delete obj.x; // console.log(obj); Object.defineProperty(obj, ‘y‘, { configurable: false, //設置是否可刪除 false為不可刪除 value: 100 }); console.log(obj);delete obj.y;//刪除 console.log(obj); //設置對象某個屬性值的時候，順便設置它的屬性。enumerable 可枚舉 configurable 可以刪除否 writable 可改值否 Object.defineProperty(obj, ‘z‘, {//enumerable 可枚舉(沒有則新添加) enumerable: true,//為false時，for..in object.keys json.stringfy 不能取到該z屬性 value: 10000 });for (var attr in obj) { console.log(attr); } Object.defineProperty(obj, ‘m‘, { writable: false,//可更改 value: 9 }); console.log(obj); obj.m = 100; console.log(obj);
以上總結了對象的defineProperty四個屬性：configurable，enumerable，value，writable
接下來再深入認識下它的另外兩個方法：set 以及get
註意：get和set不能與configurable，enumerable，value，writable同時存在
let obj = {x:10}
let y = 100;
Object.defineProperty(obj, ‘y‘, {
get() {
//當obj的y屬性被調用的時候觸發，該方法的返回值將作為獲取的結果
console.log(‘get‘);
return y;
},
set(value) {
//當obj的y屬性被設置的時候觸發
console.log(‘set‘, value);
y = value;
}
})
console.log(obj.y);
obj.y = 1;
console.log(obj.y);
介紹完defineProperty了，最後我們一起看看如何簡單的實現數據雙向綁定吧！
<body>
<input type="text" id="age">
<h1></h1>
<script>
var ageElement = document.querySelector(‘#age‘);
var h1Element = document.querySelector(‘h1‘);
let obj = {};
Object.defineProperty(obj, ‘age‘, {
get() {
},
set(value) {
ageElement.value = value;
h1Element.innerHTML = value;
}
})
obj.age = 10;
ageElement.oninput = function() {
obj.age = this.value;
}
</script>
vue中數據雙向綁定的實現原理