詳解 vue 雙向數據綁定的原理，並實現一組雙向數據綁定

1：vue 雙向數據綁定的原理：

Object.defineProperty是ES5新增的一個API，其做用是給對象的屬性增長更多的控制
Object.defineProperty(obj, prop, descriptor)
參數 obj: 須要定義屬性的對象（目標對象）
prop: 需被定義或修改的屬性名（對象上的屬性或者方法）
對於setter和getter，個人理解是它們是一對勾子（hook）函數，當你對一個對象的某個屬性賦值時，則會自動調用相應的setert函數；而當獲取屬性時，則調用getter函數。這也是實現雙向數據綁定的關鍵。

2：本身實現一個雙向數據綁定：

<div id="app">
    <input type="text" id="txt">
    <p id="show-txt"></p>
</div>



    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },

        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show-txt').innerHTML = newValue
        }
    })

    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })