VueJs与ReactJS&AngularJS的差异对比
React && VueReact 和 Vue 有许多相似之处,它们都有:
React && Vue的性能
Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well. Add as little overhead (pure JavaScript computations) as possible on top of those DOM manipulations. This is an area where Vue and React differ. The JavaScript overhead is directly related to the mechanisms of computing the necessary DOM operations. Both Vue and React utilizes Virtual DOM to achieve that,but Vue’s Virtual DOM implementation (a fork of snabbdom) is much lighter-weight and thus introduces less overhead than React’s.
In React,when a component’s state changes,it triggers the re-render of the entire component sub-tree,starting at that component as root. To avoid unnecessary re-renders of child components,you need to implement shouldComponentUpdate everywhere and use immutable data structures. In Vue,a component’s dependencies are automatically tracked during its render,so the system knows precisely which components actually need to re-render. 也就是说,未经优化的 Vue 相比未经优化的 React 要快的多。由于 Vue 改进过渲染性能,甚至全面优化过的 React 通常也会慢于开箱即用的 Vue。 JSX vs Templates在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。 render () {
let { items } = this.props
let children
if ( items.length > 0 ) {
children = (
<ul>
{items.map( item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
)
} else {
children = <p>No items found.</p>
}
return (
<div className = 'list-container'>
{children}
</div>
)
}
在 Vue 中,由于有时需要用这些功能,Vue也提供了渲染功能 并且支持了 JSX。然而,对于大多数组件来说,渲染功能是不推荐使用了。 <template> <div class="list-container"> <ul v-if="items.length"> <li v-for="item in items"> {{ item.name }} </li> </ul> <p v-else>No items found.</p> </div> </template>
这还没有结束。Vue 拥抱 HTML,而不是用 JavaScript 去重塑它。在模板内,Vue 也允许你用预处理器比如 Pug(原名 Jade) div.list-container
ul(v-if="items.length")
li(v-for="item in items") {{ item.name }}
p(v-else) No items found.
Angular && VueVue 的一些语法和 Angular 的很相似(例如 v-if vs ng-if)。据Vue开发者说因为 Angular 是 Vue 早期开发的灵感来源。然而,Augular 中存在的许多问题,在 Vue 中已经得到解决 复杂性在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多,因此你可以快速地掌握它的全部特性并投入开发。 灵活性和模块化Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是在任何时候都必须遵循 Angular 1 制定的规则,这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。 数据绑定Angular 1 使用双向绑定,Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。 指令与组件在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。 性能Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。 在 Angular 1 中,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。 Vue 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。 有意思的是,Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |