37_双向绑定

本题考点：Object.defineProperty、set、输入事件

根据题目要求，对”person“对象数据进行拦截，在拦截中操作页面的渲染，并且当输入框内容被修改时，也能触发视图的更新，核心步骤有：

创建”Observe“函数，接收一个对象参数，首先判断该对象参数是否合法，之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty函数对”person“对象进行拦截，但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能，之后可以复用此函数。
创建“defineReactive”函数，接收三个参数分别为该对象、对象属性、对象属性值。该函数内部使用Object.defineProperty函数对该对象的属性值进行拦截，且每当触发set时，调用”render“方法重新渲染视图
给"inp"对象添加”oninput“事件，当输入内容时，”person“的”weight“属性同步被改变，触发页面的重新渲染

参考答案：

function Observe(target) {
    if (typeof target !== 'object' || target == null) {
        return target
    }
    for (var key in target) {
        defineReactive(target, key, target[key])
    }
}
function defineReactive(target, key, value) {
    Object.defineProperty(target, key, {
        get: function () {
            return value
        },
        set: function (newVal) {
            if (newVal !== value) {
                value = newVal
                _render()
            }

        }

    })
}
Observe(person);

inp.oninput = function(){
    person.weight = this.value
}

题解 | #双向绑定#

37_双向绑定