Vue實現數據雙向綁定的原理：Object.defineProperty()

vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通Javascript對象傳給Vue實例來做爲它的data選項時，Vue 將遍歷它的屬性，用Object.defineProperty()將它們轉爲getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定 將MVVM做爲數據綁定的入口，整合Observer，Compile和Watcher三者，經過Observer來監聽本身的model的數據變化，經過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通訊橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變動雙向綁定效果。

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

<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj,'txt',{
        get:function () {
            return obj
        },
        set:function (newVal) {
            document.getElementById('txt').value = newVal
            document.getElementById('show').innerHTML = newVal
        }
    })
    document.addEventListener('keyup',function(e){
        obj.txt = e.target.value
    })
</script>