Vue双向绑定原理

Vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式实现的。

var vm = new Vue({
    data: {
        obj: {
            a: 1
        }
    },
    created: function () {
        console.log(this.obj);
    }
});

可以看到属性a有两个相对应的get和set方法。vue通过Object.defineProperty（）来实现数据劫持。

通过Object.Property（）设置了对象Book的name属性，对其set和get进行重写操作。get是在读取name属性时触发的函数，set是设置name属性时触发的函数。

**

一个简单版本的mvvm双向绑定

**
思路分析
实现mvvm主要包含两个方面，数据变化更新视图，视图变化更新数据

通过view更新data可以通过事件监听实现，关键点在于如何通过data更新view

数据更新是去的重点是如何知道数据变了？
通过Object.defineProperty()对属性设置一个set函数，当数据改变了就来触发这个函数。

实现过程
实现数据的双向绑定，首先要对数据进行劫持监听，所以需要一个监听器Observer，用来监听所有属性。如果属性发生变化了，就需要告诉订阅者Watcher看是否需要更新。因为有多个订阅者，所以需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理。接着我们还需要一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指定对应初始化为一个订阅者Watcher，并替换模板数据或者绑定响应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。执行以下三个步骤可以实现数据的双向绑定：

1. 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2. 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3. 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
   流程如下：
   
   1、实现一个Observer
   Observer是一个数据监听器，其核心方法为Object.defineProperty（）。如果要对所有属性都进行监听的话，可以通过递归的方法遍历所有属性值，并对其进行Object.defineProperty()处理。以下代码实现了一个Observer。

（待补充）
参考：https://www.cnblogs.com/sweeeper/p/10829887.html
这位博主写的特别棒！