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

作者: 李牧敲代码 | 来源:发表于2018-12-10 21:09 被阅读0次

深入 Vue3 源码，学习响应式原理
Vue响应式基本原理
Vue 数据双向绑定
双向绑定
Vue原理学习（二）
js实用技巧
Vue原理学习（三）
Vue 2.0响应式原理
vue响应式原理：从defineReactive学习Object
Vue3新特性笔记

先了解一下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的<script>标签里，然后用浏览器运行这个HTML。接着，你可以打开F12控制台，在控制台里输入person['name']和 person['name']=‘wry’

图1.1
可以看到，Object.defineProperty可以监听到属性被获取和修改，这也就意味着你能做很多“数据驱动的事”，比如说双向绑定。

什么是双向绑定？

单向绑定就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
而双向绑定就是如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

下面我们就实现下双向绑定：

<body>
    <form action="" class="form">
        <p>name: <input type="text" name="name"></p>
        <p>age: <input type="text" name="age"></p>
        <p>name_result: <input type="text" class="name"></p>
        <p>age_result: <input type="text" class="age"></p>
    </form>
<script>
    let person = {
        _data: {
            name: 'wcx',
            age: 13
        }
    }
    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);            
        }
    })
    Object.defineProperty(person, 'age', {
        get() {
            console.log(`age被获取了`);
            console.log(person);
            return person._data.age
        },
        set(value) {
            console.log(`age的值被修改了`)
            person._data.age = value;
            console.log(person);            
        }
    })
    let form = document.querySelector('.form');
    form.addEventListener('input', (e) => {
        let _value = e.target.value;
        let nameDom = document.querySelector('.name');
        nameDom.value = _value;
        person['name'] = _value;
        console.log('person', person)
    })
</script>
</body>