流程图解MVVM双向绑定原理

原例有bug，做了微调，主要在原例代码上加了很多阅读注释

等有时间会把该例子用ES6重写

原文：

本文基于 DMQ的github——剖析Vue实现原理 - 如何实现双向绑定mvvm

感谢原文作者从Vue提取出来的简化代码，使得理解原理更加方便。
但是鉴于原文作者的注释比较少，有些部分内容叙述得不够详细，不利于记忆，故本人详细阅读后重新记录一遍方便记忆。

首先如果我们要使用双向绑定这个功能，应该如何写代码？

仿造Vue：

<div id="mvvm-app">
    <input type="text" v-model="someStr">
    <h1>{{ someStr }}</h1>
    <h2 v-text="someStr"></h2>
    <button v-on:click="change">click me to change vm</button>
  </div>

<script src="./observer.js"></script>
<script src="./watcher.js"></script>
<script src="./compile.js"></script>
<script src="./mvvm.js"></script>
<script>
var vm = new MVVM({
      el: '#mvvm-app',
      data: {
        someStr: 'hello'
      },
      methods: {
        change: function(e){
          this.someStr = "10086";
        }
      }
    });
</script>

那么这个双向绑定到底是如何运作的呢？

运行模式图

1. 首先我们了解到Vue采用的是发布者-订阅者模式来实现双向数据绑定，这里我们就需要了解其中的两个角色，发布者和订阅者。
   
   发布者-订阅者模式
   
   这里所说的data中的某个属性，就对应着上面代码的someStr，someStr拥有一个调度中心Dep，而每个挂载着someStr属性的节点，就是所谓的订阅者（watcher），每当someStr的值发生了改变，someStr属性的setter函数就会被触发，然后Dep通知各个订阅者更新视图。
2. 那么我们现在需要知道为什么vm的data属性上会有setter，为什么每个节点都会变成订阅者，这些是如何实现的？来看mvvm.js入口文件详细代码做了什么：
   
   mvvm.js
   
   将编译mvvm上的#mvvm-app元素及其子元素，遍历data: {someStr: 'hello'},添加getter与setter。
3. 编译元素又具体是如何处理的呢（详细代码）：
   
   complie.js
   
   执行到最后到元素会进行实例化watcher，在了解实例化流程之前，我们先了解一下data是如何进行具体添加getter 和 setter的（详细代码）：
   
   observer.js
4. 那么实例化watcher会进行哪些操作，又会和getter，setter有什么交互呢？（详细代码）
   
   watcher.js
   
   如果仔细阅读图片，那么你对mvvm双向绑定一定有了一个深刻的理解，如果还是不清楚，可以点击对应的详细代码，查看具体代码及注释。