最近更新
阅读排行
关注本站
angular、avalon、Vue、react的区别
阅读：10695 次 编辑日期：2016-11-28
目录：
概述：
最近双向绑定很火啊，不用双向绑定都不好意思啊，恰巧现在的公司因为历史原因，angular、avalon、Vue都有用（还有React ），抛开怎么使用不谈（自己去看教程~），但是这几个有什么区别、有什么优缺点？今天我们来说说~
angular：
谷歌团队维护的angular是一个大而全的框架，功能强大，双向绑定、数据过滤、路由等功能一应俱全，社区生态完善。但是只支持IE8以上浏览器。
说道angular的数据绑定不得不说ta的脏检测机制，angular对常用的事件进行了封装，触发之后进入digest流程，digest流程会检查所有的watcher，若有变更就渲染，但是如果页面中的watcher过多必然会影响页面性能。
avalon：
司徒正美老师的avalon是一个更适合中国互联网环境的框架，因为支持到IE6啊，IE6是多么让中国前端苦恼的一件事，不过随着最近几年的发展，IE6已经逐渐的不被重视。
avalon的数据绑定是靠Object.defineProperty来实现的，然后定义的时候设置set get访问器，每次数据读取设置都需要通过访问器，然后检查是否改变。其中avalon对于不支持Object.defineProperty的采用了VBScript模拟实现。这方便的性能比angular更好。
但是avalon相比angular功能的确差点意思啊~不过日常用足够了，中小项目建议选择avalon。
不过再最新的chrome中双向绑定偶尔会失效，因为chrome升级之后中文无法同步到vm，解决办法，找到compositionEnd：
function compositionEnd() {
composing = false;
setTimeout(updateVModel)
}
当然下载最新的avalon也能解决了。
Vue：
话说我很喜欢尤雨溪老师的Vue，angular是大而全Vue就是小而美，适合移动端开发。Vue也许是这几个框架里面性能最好的。
Vue实现双向绑定的原理与avalon类似，但是Vue不支持IE8。可以配合使用第三方 CSS 动画库，如 Animate.css。
Vue2.0已经实现虚拟DOM，没错就是React 让人眼前一亮的Virtual DOM。也一样支持组件式开发。Vue 提供了Vue-cli 脚手架，能让你非常容易地构建项目，包含了 Webpack。
下载最新的Vue。
React ：
最后说说React 吧，是由facebook团队维护，优点很多，虚拟DOM，组件化、热部署等等，缺点我个人觉得JSX语法不是很符合前端的书写习惯、版本不够稳定。
React 通过diff机制计算出小的页面渲染代价，并且通过get/set实现热部署。
React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。
小结：
总的来说angular大而全，Vue小而美，avalon更加优雅，React 生态系统更加繁荣。
教程：
angular教程：http://www.apjs.net/
avalon教程：http://avalonjs.coding.me/
