Angular1、React、vue2差异

2019独角兽企业重金招聘Python工程师标准>>>

数据绑定

    Angular1：

        双向数据绑定     

        1.从视图到数据

        例如input组件、路径等数据的变化，ng在这些东西上增加了许多事件进行监听，当发生数据变动时，自动响应到相应的数据中。

        2.从数据到视图

        ng中内置了 $digest 和 $apply 方法，当数据变化时，自动或手动调用这两个方法之一（脏检查机制，先检查数据是否发生变化），实现从数据流到视图的更新。

    React：

        单向数据绑定

        从视图到数据

        主要也是通过事件监听

        注：如需从数据到视图的更新，需要手动调用 setState 方法。

    Vue2：

        双向数据绑定

        采用getter、setter方式，修改了原生对象的getter、setter方法，当数据变动时，浏览器会自动调用这个两个方法，进而响应数据变更。

    小结：

    脏检测机制与setter，getter的观测机制各有优劣，对于简单、少量的数据流更新，setter、getter机制能更快的响应，但是对于一次大量的数据变动，脏检测可以在检测完所有的变动进行一次dom操作，进而提升性能，而不会想setter、getter机制那样需要进行大量的dom操作。

路由选择

    Angular1：

        ng的路由地址形如“http://www.demo.com/#/about”，浏览器遇到带有“/#”的链接，不会做任何跳转，故监听地址的变动，再解析“/#”后面的字符串，并根据配置好的路由表进行相应的路由跳转。

    React、Vue2

        当地址变动时，阻止浏览器的默认事件，再对地址进行解析并跳转。

    小结：

        三者的两种路由选择也是各有优点，ng的路由选择更为简单，但是比较丑陋，react、vue的路由选择实现稍为复杂，但是却更为美观。

转载于:https://my.oschina.net/willbean/blog/855845