Object.defineProperty-vuejs数据响应基石

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

https://juejin.im/post/5b99215d5188255c520cfe22

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>