vue2双向绑定 Object.defineProperty()
Object.defineProperty()接收三个参数
- 要操作的对象 （Object）
- 要修改或定义的key（String）
- 描述key的属性（Object）
<input type="text" id="input">
<span id="text"></span>
let obj = {}
// 重写get和set
Object.defineProperty(obj, 'prop', {
get: function () {
return val
},
// 当值发生改变时，去更新视图层
set: function (newval) {
val = newval
document.getElementById('text').innerHTML = val
}
})
// 在输入框输入内容时被keyup键盘类型 触发事件监听
document.getElementById('input').addEventListener('keyup', function (e) {
obj.prop = e.target.value
})
vue3双向绑定 Proxy()
Proxy() 接收两个参数
- 要操作的对象 （Object）
- 配置对象/描述key的属性（Object）
<input type="text" id="input">
<span id="text"></span>
let obj = {}
const proxy = new Proxy(obj, {
// 接受三个参数 目标对象 key value
get: function (target, prop, value) {
return value
},
// 接受三个参数 目标对象 key value
set: function (target, prop, value) {
target[prop] = value
document.getElementById('text').innerHTML = value
}
})
// 输入框输入内容时 触发事件监听
document.getElementById('input').addEventListener('input', function (e) {
proxy.prop = e.target.value
})
