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>