图解MVVM双向绑定原理

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

---

仿造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上的#mvvm-app元素及其子元素，遍历data: {someStr: ‘hello’},添加getter与setter。

3. 再看看data是如何进行具体添加getter 和 setter的（详细代码：observer.js）：

---

4. 编译元素又具体是如何处理的呢（详细代码：compile.js）：

---

5. 执行到最后到元素会进行实例化watcher,那么实例化watcher会进行哪些操作，又会和getter，setter有什么交互呢？（详细代码：watcher.js）

---