基本原理

脏刷新基本遵循订阅者设计模式，$watch添加监听者到$$watchers，当执行$degist的时候，读取watchers列表，当发现数值变动的时候，对页面进行刷新，与getter/setter最大的不同有两个地方，1.当数值发生变动的时候，需要主动执行$degist进行主动刷新，2.$degist会扫描监听列表，如果监听列表过长，容易导致性能问题。

代码实现

1.定义$watch函数，记录要监听的属性，并将该属性放到$$watcher监听列表里面。

$watch: function (key, listenerFn) {
  var self = this;
  var watchFn = function (scope) {
    return {value: scope.model[key], key: key};
  }
  
  var watcher = {
    watchFn: watchFn,
    listenerFn: listenerFn || function () {}
  };
  
  this.$$watcher.push(watcher);
}

2.$digest主动数据刷新，函数会读取监听列表里面的元素，新旧数值进行对比，如果发现数据不一样，将会重新渲染。

 $digest: function () {
    var self = this;
    var length = this.$$watcher.length;
    var watcher, newValue, oldvalue, key;
    while(length--){
        watcher = this.$$watcher[length];
        console.log(watcher)
        newValue = watcher.watchFn(this).value;
        key = watcher.watchFn(this).key;
        oldValue = watcher.last;
        if(newValue !== oldValue){
            watcher.last = newValue;
            var arr = self.model2sync[key]
            
            each(arr, function() {
              // 更新节点的text
              this.node.textContent = self.renderStr(this.raw)
            })
         //   var arr = self.model2sync[key]
          //  console.log(arr)
            watcher.listenerFn(newValue, oldValue, this, key);
        }
    }
}

3.改动model数据，主动执行$digest函数，进行脏值检查。

var demo1 = mvvm('#demo1', {
  model: {
    name: 'world',
    time: Date(),
    css: 'green'
  }
});

demo1.$watch('time')

setInterval(function () {
  demo1.model.time = Date();
  demo1.$digest();
}, 1000);

4.完整代码
http://codepen.io/youyudehexie/pen/NxbqPz

对比Getter/Setter的优劣

优点
先来一个重要的例子，列表页刷新。

// 此处是伪代码，renderData 与某个双向绑定模板绑定。
var renderData = [0...1000];
renderData[] = 0; //默认所有数组元素为0.
for (var i = 0; i < 1000; i++) {
      renderData[i] = 1;
}

当我们使用Getter/Setter的时候，实际上，每次修改数值都会激活刷新模版的方法，而脏刷新则可以在完成1000个元素的数值变动后，统一刷新到Dom，只需要刷新1次，显然而见，脏刷新优势巨大。

缺点

• 当监听元素变多的时候，watcher列表会变得很长，每次都要花费大量的计算，才能找到变动的数据块。
• 需要主动调用$degist才会刷新，Getter/Setter 方法显得更加智能。