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)
}
Vue:
话说我很喜欢尤雨溪老师的Vue,angular是大而全Vue就是小而美,适合移动端开发。Vue也许是这几个框架里面性能最好的。
Vue实现双向绑定的原理与avalon类似,但是Vue不支持IE8。可以配合使用第三方 CSS 动画库,如 Animate.css。
Vue2.0已经实现虚拟DOM,没错就是React 让人眼前一亮的Virtual DOM。也一样支持组件式开发。Vue 提供了Vue-cli 脚手架,能让你非常容易地构建项目,包含了 Webpack。
React :
最后说说React 吧,是由facebook团队维护,优点很多,虚拟DOM,组件化、热部署等等,缺点我个人觉得JSX语法不是很符合前端的书写习惯、版本不够稳定。
React 通过diff机制计算出小的页面渲染代价,并且通过get/set实现热部署。
React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。
小结:
总的来说angular大而全,Vue小而美,avalon更加优雅,React 生态系统更加繁荣。
教程: