vue2雙向綁定 Object.defineProperty()
Object.defineProperty()接收三個(gè)參數(shù)
- 要操作的對(duì)象 （Object）
- 要修改或定義的key（String）
- 描述key的屬性（Object）
<input type="text" id="input">
<span id="text"></span>
let obj = {}
// 重寫(xiě)get和set
Object.defineProperty(obj, 'prop', {
get: function () {
return val
},
// 當(dāng)值發(fā)生改變時(shí)羊初，去更新視圖層
set: function (newval) {
val = newval
document.getElementById('text').innerHTML = val
}
})
// 在輸入框輸入內(nèi)容時(shí)被keyup鍵盤(pán)類(lèi)型 觸發(fā)事件監(jiān)聽(tīng)
document.getElementById('input').addEventListener('keyup', function (e) {
obj.prop = e.target.value
})
vue3雙向綁定 Proxy()
Proxy() 接收兩個(gè)參數(shù)
- 要操作的對(duì)象 （Object）
- 配置對(duì)象/描述key的屬性（Object）
<input type="text" id="input">
<span id="text"></span>
let obj = {}
const proxy = new Proxy(obj, {
// 接受三個(gè)參數(shù) 目標(biāo)對(duì)象 key value
get: function (target, prop, value) {
return value
},
// 接受三個(gè)參數(shù) 目標(biāo)對(duì)象 key value
set: function (target, prop, value) {
target[prop] = value
document.getElementById('text').innerHTML = value
}
})
// 輸入框輸入內(nèi)容時(shí) 觸發(fā)事件監(jiān)聽(tīng)
document.getElementById('input').addEventListener('input', function (e) {
proxy.prop = e.target.value
})
