javascript - angular.js，vue.js，avalon.js这些mvvm框架中的双向数据绑定是如何实现的？

Question

最近在看mvvm框架，感觉双向数据绑定这块很是开阔思路，但是这些框架代码模块化都很零碎，看起来很跳跃。。有没有大神研究过能说明白一下，尽量少阐述概念，能说其中一个就行~

Answer 1

推荐《build your own angularjs》，这儿有讲解脏检测部分的中文翻译

以angular为例，忽略所有的细节，只讲大概的原理

<code>html</code><code><p class="{{foo}}" ></p>
</code>

angular首先会分析这段代码，在当前的scope下，执行如下代码：

<code>js</code><code>scope.watch(
    //watcher function, 返回模板分析出的获取值表达式
    function(scope){
        return scope.foo
    },
    //listener function，值表达式对应的渲染UI的函数，此处为伪代码
    function(newValue, oldValue, scope){
        p.class = newValue
    }
)
</code>

随后执行scope.$digest()，这个$digest函数检测scope上的所有watcher function返回值是否有变更，若有，则执行对应的listener function，将新的值渲染到UI上去

检测值变更的方式很多，angular用的脏检测性能存在问题，趋势是使用Object.defineProperty设置setter/getter或Object.observe这样更优雅的方式

Answer 2

简单来说下检测数据改变:
angular，就是利用脏检查机制，保留两份，一份旧的一份新的，然后做检查;这样就能知道数据是否改变了。
Avalon和vue:都是使用的Object.defineProperty来实现的，然后定义的时候设置set get访问器，每次数据读取设置都需要通过访问器，然后检查是否改变;其中avalon对于不支持Object.defineProperty的采用了VBScript模拟实现。

然后就是和页面上的view中的数据联动了。angular会首先parse页面，然后编译compile，然后link。其中会有指令啊 表达式啊就是在这个过程中实现了联动。而avalon也差不多，只是改叫扫描了，vue也类似。

Answer 3

观察者模式

Answer 4

vue采用的是Object.defineProperty的getter和setter 结合观察者模式(watcher,dep,observer)
ng是脏检查

Answer 5

思路就是有一个timer一直在做一边一边的检查每个绑定的对象，如果有变化就触发响应过程。。。。