简单数据响应式原理（数据双向绑定）

什么是数据响应式

即数据双向绑定，改变Model时，View自动更新。改变View时，Model也会自动更新。

数据响应式原理

1. 在Vue2.x版本中，利用Object.defineProperty()重新定义对象获取属性值（get）和设置属性值的操作实现数据响应。
2. 在Vue3.0版本中，采用ES6的Proxy对象来实现。

数据响应简单实现

Object.defineProperty()实现数据响应

1. 根据上图实现整体的架构：MVVM类（即Vue类）、Watcher类（）：订阅—发布者设计模式。
2. 实现M到V，即将模型数据绑定到视图。

   <script>
       //发布者
       class Vue {
           constructor(options) {
               this.options = options;
               this.$el = document.querySelector(options.el);
               this.$data = options.data;
               this._directive = {};   //充当一个容器，存放订阅者
               //  因为性能的原因，重拍重绘一般采用局部渲染，所以订阅容器格式为：
               //  {myText:[订阅者1，订阅者2],myBox:[订阅者3，订阅者4]}
               //  如果需要采用广播，可以使用{订阅者1，订阅者2，订阅者3，订阅者4}这种格式。
               this.Observer(this.$data);  
               this.Compile(this.$el);
           }
           //劫持数据
           Observer(data) {  //将实例中的data对象的属性添加到容器中，本例是   data:{myText: "大吉大利",myBox: "落地成盒"} 
               for (let key in data) {
                   this._directive[key] = [];//初始化容器
                   //添加之后_directive={myText：[],myBox:[]}
               }
           }
           //解析指令
           // 找出所有的指令，进行依赖收集（找指令），方便去订阅data里面的属性，进行数据更新
           Compile(el) {   //参数el是div#app节点
               let nodes = el.children; //获取所有子节点（dom）
               for (let i = 0; i < nodes.length; i++) {
                   let node = nodes[i];
                   if (node.children.length) {