vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
    第一步
    通过Observer提供的接口，对需要observe的数据对象进行递归遍历，给对象的每个属性、子属性对象的属性都加上setter和getter（都绑定了一个专用的 Dep对象，这里的状态对象主要指组件当中的data属性）。这样的话，给这个对象的某个值赋值，就会触发setter,那么就能监听到了数据变化。
    第二步
    compile解析模版指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
    第三步
    Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：1.在自身实例化时往属性订阅器(dep)里面添加自己2.自身必须有一个update()方法3.待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
    第四步
    MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的 model数据变化，通过Compile来解析编译模版指令，最终利用Watcher搭起Observer和Compiler之间的通信桥梁，达到数据变化->视图更新；视图交互变化(input)->数据model变更的双向绑定效果。

    image.jpeg

    1. 当执行 new Vue() 时，Vue 就进入了初始化阶段，
    3. 一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；
    5. 另一方面，Vue 的指令编译器Compile 对元素节点的指令进行解析，初始化视图，并订阅Watcher 来更新视图，
    7. 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。
    9. 当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，
    11. Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。
    13. 因为VUE使用Object.defineProperty方法来做数据绑定，而这个方法又无法通过兼容性处理，所以Vue 不支持 IE8 以及更低版本浏览器。
    15. 另外，查看vue原代码，发现在vue初始化实例时， 有一个proxy代理方法，它的作用就是遍历data中的属性，把它代理到vm的实例上，这也就是我们可以这样调用属性：vm.aaa等于vm.data.aaa。
    17. Observer
    18. 数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用Object.defineProperty的getter和setter来实现。
    19. Compile
    20. 指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
    21. Watcher
    22. 订阅者， 作为连接 Observer 和 Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。
    24. Dep
    25. 消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify 函数，再调用订阅者的 update方法。
    29. <!DOCTYPE html>
    30. <html lang="en">
    31.   <head>
    32.     <meta charset="UTF-8" />
    33.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    34.     <title>Document</title>
    35.   </head>
    36.   <body>
    37.     <script>
    38.       function Observer(data) {
    39.         if (!data || typeof data !== "object") return;
    40.         Object.keys(data).forEach((key) => {
    41.           defineReactive(data, key, data[key]);
    42.         });
    43.       }
    44.       function defineReactive(obj, key, val) {
    45.         let dep = new Dep();
    46.         Object.defineProperty(obj, key, {
    47.           set(newVal) {
    48.             //Watcher初始化触发
    49.             // 我们将订阅器Dep添加订阅者的操作设计在getter里面，这是为了让Watcher初始化时进行触发，因此需要判断是否要添加订阅者。
    50.             // 在setter函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新的函数。
    51.             dep.depend();
    52.             val = newVal;
    53.           },
    54.           get() {
    55.             return val;
    56.           },
    57.         });
    58.       }
    59.       class Dep {
    60.         constructor() {
    61.           this.subs = [];
    62.         }
    63.         //增加订阅者
    64.         addSub(sub) {
    65.           this.subs.push(sub);
    66.         }
    67.         //判断是否增加订阅者
    68.         depend() {
    69.           if (Dep.target) {
    70.             this.addSub(Dep.target);
    71.           }
    72.         }
    73.         //通知订阅者更新
    74.         notify() {
    75.           this.subs.forEach((sub) => {
    76.             sub.notify();
    77.           });
    78.         }
    79.       }
    80.       Dep.target = null;
    81.       // 把 Watcher 添加到 Dep 容器中，这里我们用到了 监听器的 get 函数
    82.       // 接收到通知，执行更新函数。
    83.       class Watcher {
    84.         // vm:一个Vue的实例对象；
    85.         // exp:是node节点的v-model或v-on：click等指令的属性值。如v-model="name"，exp就是name;
    86.         // cb:是Watcher绑定的更新函数;
    87.         constructor(vm, exp, cb) {
    88.           this.vm = vm;
    89.           this.exp = exp;
    90.           this.cb = cb;
    91.           this.value = this.get(); // 将自己添加到订阅器的操作
    92.         }
    93.         update() {
    94.           let value = this.vm.data[this.exp];
    95.           let oldVal = this.value;
    96.           if (value !== oldVal) {
    97.             this.value = value;
    98.             this.cb.call(this.vm, value, oldVal);
    99.           }
    100.         }
    101.         get() {
    102.           Dep.target = this; // 缓存自己
    103.           let value = this.vm.data[this.exp]; // 强制执行监听器里的get函数
    104.           Dep.target = null; // 释放自己
    105.           return value;
    106.         }
    107.       }
    108.       // 两者结合
    109.       class Mvue {
    110.         constructor(options, prop) {
    111.           this.$options = options;
    112.           this.$data = options.data;
    113.           this.$prop = prop;
    114.           this.$el = document.querySelector(options.el);
    115.           this.init();
    116.         }
    117.         init() {
    118.           observer(this.$data);
    119.           this.$el.textContent = this.$data[this.$prop];
    120.           new Watcher(this, this.$prop, (value) => {
    121.             this.$el.textContent = value;
    122.           });
    123.         }
    124.       }
    125.       <div id="app">{{ name }}</div>;
    126.       const vm = new Mvue(
    127.         {
    128.           el: "#app",
    129.           data: {
    130.             name: "我是摩登",
    131.           },
    132.         },
    133.         "name"
    134.       );
    135.     </script>
    136.   </body>
    137. </html>