之前进行项目选型的时候,对比了一下当前流行框架(AngularJS/React/Vue)的一些特点,在这里简单总结一下。
因为个人最后选择了 Vue,所以就让Vue先生做一回主角,和其他两位来个华山论剑~
React vs Vue
相同点
- 使用 Virtual DOM(Vue2 使用)
- 提供了响应式和组件化的视图组件
- 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库
性能
在 React 中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。
如要避免不必要的子组件的重渲染,则需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法来优化性能。
在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。
这个特点使得开发者无需考虑优化。
HTML
在 React 中,所有的组件的渲染功能都依靠 JSX,这使得开发人员可以使用纯 JavaScript 功能来构建你的视图页面,并且开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板更为先进(比如,linting、类型检查、编辑器的自动完成)。
Vue 也提供了渲染函数,并支持JSX,但整体思想还是拥抱经典的 Web 技术。
它使用模板,一方面贴近了习惯 HTML 的开发者,也方便了已有应用向 Vue 的迁移。
功能支持
Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。
React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。
但相对的,React 的生态系统相比 Vue 更加繁荣。
学习曲线
React 学习曲线陡峭,在学习之前,需要知道 JSX 和 ES2015。
相比之下,Vue 更易学习。
原生渲染
React —— React Native
Vue —— Weex/NativeScript
AngularJS(Angular 1)
性能
AngularJS 使用脏值检查实现双向绑定,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环 (digest cycle) 可能要运行多次。AngularJS 用户常常要使用深奥的技术,以解决脏检查循环的问题。
Vue 使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。
复杂性
Vue.js 完胜 AngularJS。
数据绑定
AngularJS 使用双向绑定。
Vue 在不同组件间强制使用单向数据流,更为清晰易懂。
Angular(Angular 2)
Angular 和 Vue 的最大区别应该是在于TypeScript。因此在中小型规模的项目中,用 Vue 可能是更好的选择(因为此时引入 TS 可能并不会带来太多明显的优势)。
不过TypeScript是趋势,Vue 也已经正朝这个方向努力~
参考
- Vue官网 — 对比其他框架