数据双向绑定 Object.defineProperty

数据劫持

• 数据劫持，就是数据代理。
• 数据劫持指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

Object.defineProperty(obj, prop, descripto)

• Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
  • obj 要定义属性的对象。
  • prop 要定义或修改的属性的名称或 Symbol 。
  • descriptor 要定义或修改的属性描述符。
• Object.defineProperty(obj, prop, descriptor)

<div id="container">
    <input type="text" id="input">
    <div class="curValue"></div>
</div>

var input = document.querySelector('#input')
var curValue=  document.querySelector('.curValue')
var obj = {}, val = ''

Object.defineProperty(obj, 'name', {
    set(value) {
        val = value
        curValue.innerHTML = val
        console.log('当前设置的value:', val);
    },
    get() {
        return val
    },
})

document.addEventListener('keyup', (e) => {
    obj.name = e.target.value
})