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事件，從而實現了數據綁定。