Vue响应式原理之——Object.defineProperty

先了解一下Object.defineProperty()这个方法：

• 参考MDN上的解释

这个方法主要是用

直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
先写一个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);
        }
    })

这段代码可以直接写在HTML的

image.png

可以看到在name输入框输入的值会影响到person里name的值，这样双向绑定就实现了。name_result主要是为了更方便的展示结果，不写也没关系。

（完）