三大框架的对比

　　Vue和React都使用虚拟dom，React拥有更加丰富的生态系统。

渲染上的区别

　　React重新渲染的时候会以这个组件为根，将整颗子树进行渲染，手动实现shouldComponentUpdate进行优化，而Vue组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。

对于html的表达

　　对于html的表达，vue使用的是模板，模板比jsx读起来更加自然，而且基于模板的项目更容易往vue迁移，vue其实也支持jsx，不过更推荐使用模板；而react使用的是jsx，jsx是javascript的语法糖，里面可以写变量、流程控制，引用当前作用域的值等。

实现作用域内的css

　　react实现作用域内的css需要使用一些CSS-in-JS库来实现，而对于单文件的vue，只需要在style标签中加一个scoped即可，如果要进行其他样式预处理，全部都在style标签中

学习成本

　　学习react，需要知道相关的工具使用，如jsx、babel等，但学习vue，可能只需要不到一天时间看官方文档，就可以写出简单的程序了

对于双向绑定

　　在react中使用表单相当麻烦，为了维持双向绑定，必须要每个字段对应一个onchange函数。

　　在angular 1 中有双向绑定，但因为这点太灵活了不好管理，导致很多时候没法跟踪数据的变化，不知道哪里改变了这个值。

　　vue也支持双向绑定（v-model），但默认使用的是单向数据流

原生渲染

　　react和vue都具有编写app的能力，分别对应react native 和 weex，但react native更加成熟

vue和angular的性能对比

　　angular使用脏检测、watcher多的时候，脏检测很慢，而且可能要循环多次，对这里的优化可能会比较复杂

　　vue能精准跟踪依赖的变化，而不需要像angular进行循环，效率更高

组件间的通信对比

angular

　　对于作用域，如果组件处于不同作用域，可以使用emit、broadcast等作用域通信，同一个作用域的话，就通过这个作用域来通信；

　　对于controller：可以通过require获取指令的controller来通信，或者使用共有的controller来通信

　　对于传参：传入一个函数，传入单向绑定的值，或双向绑定的值

vue

　　通过props传递的数据是单向的，即从上往下。

　　从下往上的方式（自定义事件）是父组件通过v-on传递一个函数给子组件，子组件中执行emit，触发该函数。其实不用v-on，直接通过props传递一个函数供子组件调用也行：

    Vue.component('son', {
        template:'<button @click="click">son</button> ',
        props: ['cb'],
        data:function(){
            var cb = this.cb;
            return {
                click:function(){
                    cb();
                }
            }
        }
    })
    Vue.component('parent', {
        template:'<son :cb="cb"></son>',
        data:function(){
            return {
                cb:function(){
                    alert("function in parent execed")
                }
            }
        }
    })
    new Vue({
        el: '#root',
        template:'<parent></parent>'
    })

 

　　对于非父子组件的通信：

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

 

 react

　　通过props传递值实现从上往下的通信，这是单向的，而对于从下往上，和vue类似，通过props传递一个函数供子组件调用即可。

　　以上是子组件调用父组件，通过props。而父组件调用子组件，可以通过ref获取子组件的实例对象，再与之进行通信

　　而对于兄弟组件间的通信，使用全局的eventBus，或者接着一个共有的父组件来通信：子组件调用props传来的父组件的函数，通知父组件发消息给另外的子组件，父组件setState更新另外一个子组件的props，从而达到通信（显然这种性能太差，默认情况下setState会刷新整颗树），更好的方式是使用redux或flux

列表渲染对比

　　angular通过显式指定track by来实现列表元素dom的复用

　　而react和vue都采用虚拟dom，则通过指定key来实现复用。不指定key的时候前者会有warning，而后者不会，不指定key默认都是key=index，也就是就地复用，当key重复的时候，也都是第一个key会进行dom复用，而后一个key则创建新的dom

参考：

　　http://www.cnblogs.com/hellohello/p/8068008.html

　　http://www.cnblogs.com/hellohello/p/8150400.html

总结：

　　三个框架中都需要一个标识来追踪数组中（循环创建）的dom，只不过vue和react默认是以index作为标识，而ng1默认以对象的$$hashkey来标识（对于原始类型则是对应的值来标识），用于追踪dom的标识不存在的话，则移除这个dom，创建新的dom，存在的话则复用。

选择React，为什么不选Angular

react：强大的生态圈 + 虚拟dom + jsx同构 + 单向数据流