vue如何实现双向数据绑定？

vue中实现数据绑定的一个重要点：

• Object.defineProperty()函数

<input type="text" id="a" />
<span id="b"></span>

<script>
    var obj = {}
    Object.defineProperty(obj, 'test', {
    	// 不需要监听事件，只要达到条件就会自动触发
        set: function(newVal) {
            document.getElementById('a').value = newVal;
            document.getElementById('b').innerHTML = newVal;
        }
    });
    
    // 需要添加keyup事件去监听，不然就不知道已经发生了改变。
    document.addEventListener('keyup', function(e) {
        obj.test = e.target.value;
        // 当test属性改变时，会触发上面的set方法。
    })
</script>

那么Object.defineProperty()底层提供了两个API，一个是get，一个是set。
当我们给obj.test属性赋值时，会发现set函数触发了，那这就和我们去手动添加监听事件不一样了，当我们改变obj.test的值时，会自动触发set。而我们去获取obj.test的值时，也会自动触发get方法。

可以看到，当我们在控制台改变了obj.test的值时，会自动触发set事件，从而实现了数据绑定。