先了解一下Object.defineProperty()這個(gè)方法：
這個(gè)方法主要是用
直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性， 并返回這個(gè)對(duì)象。
先寫(xiě)一個(gè)demo
let person = {
_data: {
name: 'wcx',
age: 122
}
}
Object.defineProperty(person, 'name', {
get() {
console.log(`name被獲取了`);
console.log(person);
return person._data.name
},
set(value) {
console.log(`name的值被修改了`)
person._data.name = value;
console.log(person);
}
})
這段代碼可以直接寫(xiě)在HTML的<script>標(biāo)簽里，然后用瀏覽器運(yùn)行這個(gè)HTML。接著，你可以打開(kāi)F12控制臺(tái)，在控制臺(tái)里輸入person['name']和 person['name']=‘wry’
圖1.1
可以看到，Object.defineProperty可以監(jiān)聽(tīng)到屬性被獲取和修改，這也就意味著你能做很多“數(shù)據(jù)驅(qū)動(dòng)的事”，比如說(shuō)雙向綁定。
什么是雙向綁定？
單向綁定就是把Model綁定到View，當(dāng)我們用JavaScript代碼更新Model時(shí)，View就會(huì)自動(dòng)更新。
而雙向綁定就是如果用戶更新了View，Model的數(shù)據(jù)也自動(dòng)被更新了，這種情況就是雙向綁定。
下面我們就實(shí)現(xiàn)下雙向綁定：
<body>
<form action="" class="form">
<p>name: <input type="text" name="name"></p>
<p>age: <input type="text" name="age"></p>
<p>name_result: <input type="text" class="name"></p>
<p>age_result: <input type="text" class="age"></p>
</form>
<script>
let person = {
_data: {
name: 'wcx',
age: 13
}
}
Object.defineProperty(person, 'name', {
get() {
console.log(`name被獲取了`);
console.log(person);
return person._data.name
},
set(value) {
console.log(`name的值被修改了`)
person._data.name = value;
console.log(person);
}
})
Object.defineProperty(person, 'age', {
get() {
console.log(`age被獲取了`);
console.log(person);
return person._data.age
},
set(value) {
console.log(`age的值被修改了`)
person._data.age = value;
console.log(person);
}
})
let form = document.querySelector('.form');
form.addEventListener('input', (e) => {
let _value = e.target.value;
let nameDom = document.querySelector('.name');
nameDom.value = _value;
person['name'] = _value;
console.log('person', person)
})
</script>
</body>
image.png
可以看到在name輸入框輸入的值會(huì)影響到person里name的值，這樣雙向綁定就實(shí)現(xiàn)了。name_result主要是為了更方便的展示結(jié)果，不寫(xiě)也沒(méi)關(guān)系。
