vue的双向数据绑定原理

vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。

当获取数据的时候，会触发对应的getter方法，当设置数据的时候，会触发对应的setter方法。

然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。

或者也可以这样理解：在vue内部采用数据劫持结合“发布者 - 订阅者”模式的方式，通过 Object.defineProperty()
来劫持各个属性的 setter、 getter，在数据变动时发布消息给订阅者（Watcher），触发相应监听回调。

下面这段代码来方便理解：

<script>
        var obj = {};
        let middle = 100;
        Object.defineProperty(obj,"msg",{
            get(){
               
                return middle
            },
            set(val){
                
                middle = val
            }
        })
        
        obj.msg = 500;//在给obj设置msg属性的时候，会调用自身的set方法
        console.log(obj.msg)//在获取属性时会调用自身的get方法     //打印结果为500
    </script>