Object.defineProperty-vuejs數據響應基石

https://www.jianshu.com/p/07ba2b0c8fca

http://www.javashuo.com/article/p-zvktowoy-en.html

vuejs數據雙向綁定地核心原理就是使用 Object.defineProperty 這個函數來實現數據劫持，並經過publisher-subscriber模型來劫持和使用每個屬性。setter和getter在數據發生變化時publish一個message給subscriber,而且觸發對應地監聽回調被調用。當一個普通地Object做爲vue組件地data時，vue會遞歸枚舉該Object的全部屬性，並使用Object.defineProperty將這些屬性轉變爲getter/setter.用戶並不會感知到getter/stter，可是這些getter/setter卻使得vue能夠跟蹤dependency而且當屬性被訪問或者修改時通知對應的變化。

vue經過Observer,Compiler和Watcher來實現MVVM的雙向數據綁定。

1. 經過observer來監控你的model數據變化，

2.經過Compile來parse compiler template instructions {{}}

3. watcher創建observer和compile

4. 他們之間的通訊橋樑: Data Change -> View update/View Interaction Change->Data model change

<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>