vue.js与其他前端框架的对比

  • 时间:
  • 浏览:1

Riot 2.0 提供了有另另另一个 类事于基于组件的开发模型 (在 Riot 中称之为 Tag),它提供了小巧精美的 API。Riot 和 Vue 在设计理念上机会有某些类事处。尽管相比 Riot ,Vue 要显得重某些,Vue 还是有太大太大太大太大显著优势的:

在性能方面,这有另另另一个 框架都非常的快,亲戚亲戚朋友也这么 足够的实际应用数据来下有另另另一个 结论。机会你一定想看 些数据的话,让我参考這個 第三方跑分。单就這個 跑分来看,Vue 似乎比 Angular 要减慢某些。

在大小方面,最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了某些。但即使这么 ,有另另另一个 涵盖了 Vuex + Vue Router 的 Vue 项目 (1000kb gzipped) 相比使用了什么优化的 angular-cli 生成的默认项目尺寸 (~11000kb) 还是要小的多。

灵活性

React和Vue时会 很好的Chrome扩展工具去帮助你找出bug。它们会检查你的应用,让我想看 Vue机会React中的变化。你也可不前要想看 应用中的情況,并实时想看 更新。

机会你对React熟悉,你就会知道应用中的情況是(React)关键的概念。时会 某些配套框架被设计为管理有另另另一个 大的state对象,如Redux。此外,state对象在React应用中是不可变的,愿因 它只有被直接改变,在React中你前要使用setState()辦法 去更新情況。

Vue的开发工具:

https://cdn.deliciousbrains.com/content/uploads/2017/06/15151111/vue-devtools.mp4

不过恶心的是React出了有另另另一个 霸王条款:Facebook拒修改React开源许可

React/JSX乍看之下,虽然非常啰嗦,但使用JavaScript而时会 模板来开发,赋予了开发者某些编程能力。

在Vue中,state对象并时会 前要的,数据由data属性在Vue对象中进行管理。

Vue.js(2.0版本)与React的其中最大有另另另一个 类事之处,太大太大太大太大我亲戚亲戚朋友都使用了三种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说太大太大太大太大我它名字的意思:虚拟DOM,DOM树的虚拟表现。它的诞生是基于这么 有另另另一个 概念:改变真实的DOM情況远比改变有另另另一个 JavaScript对象的花销要大得多。

在React中,这是前要的,它依赖有另另另一个 “单一数据源”作为它的“情況”。而在Vue中,props略有不同。它们一样是在组件中被定义,但Vue依赖于模板语法,让我通过模板的循环函数更高效地展示传入的数据。

事实上说,有另另另一个 工具都非常好用,都能为你建立有另另另一个 好环境。我希望 机会可不前要不配置Webpack的话,我和Jeff认为这是天大的好事。

React推荐你所有的模板通用JavaScript的语法扩展——JSX书写,不过这对于传统的前端开发人员前要相应的学习。同样的代码,用JSX书写的例子如下:

要学习 Vue,你只前要有良好的 HTML 和 JavaScript 基础。有了什么基本的技能,你就可不前要非常快速地通过阅读 指南 投入开发。

Angular 的学习曲线是非常陡峭的 —— 作为有另另另一个 框架,它的 API 面积比起 Vue 要大得多,你也我希望 前要理解更多的概念能够开始英文英文有强度地工作。当然,Angular 三种的比较复杂度是机会它的设计目标太大太大太大太大我只针对大型的比较复杂应用;但不可表态的是,这也使得它对于经验不甚充裕的开发者相当的不友好。

而不同之处是在于它们怎么关联它们本人 的配套框架。Vue的核心团队维护着vue-router和vuex,它们时会 作为官方推荐的指在。而React的react-router和react-redux则是由社区成员维护,它们都时会 官方维护的。

在上端有另另另一个 例子中,亲戚亲戚朋友可不前要想看 React和Vue时会 'props'的概念,这是properties的简写。props在组件中是有另另另一个 特殊的属性,允许父组件往子组件传送数据。

而在JavaScript中,亲戚亲戚朋友可不前要用对象简单地创造有另另另一个 针对上端例子的映射:

1,MVVM(Model)(View)(View-model)

2,模块化(Module)控制器(Contoller)依赖注入:

3,双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面。

4,指令(ng-click ng-model ng-href ng-src ng-if...)

5,服务Service($compile $filter $interval $timeout $http...)

其中双向数据绑定的实现使用了$scope变量的脏值检测,使用$scope.$watch(视图到模型),$scope.$apply(模型到视图)检测,内部管理调用的时会 digest,当然也可不前要直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时,脏检测对浏览器性能的消耗机会很大,官方注明的最大检测脏值为10000个数据。

React和Vue时会 自己的构建工具,让我使用它快速搭建开发环境。React可不前要使用Create React App (CRA),而Vue对应的则是vue-cli。有另另另一个 工具都能让我得到有另另另一个 根据最佳实践设置的项目模板。

Vue 相比于 Angular 更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去怎么组织你的应用代码。有人机会喜欢有严格的代码组织规范,但时会 开发者喜欢更灵活自由的辦法 。

学习曲线

Vue鼓励你去使用HTML模板去进行渲染,使用类事于Angular风格的辦法 去输出动态的内容。我希望 ,通过把原有的模板整合成新的Vue模板,Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。

下面从好多个方面来比较一下Vue.js和Angular.js的区别

Vue 的某些语法和 AngularJS 的很类事 (类事 v-if vs ng-if)。机会 AngularJS 是 Vue 早期开发的灵感来源。然而,AngularJS 中指在的某些大现象,在 Vue 中机会得到外理。

简单来说,Virtual DOM是有另另另一个 映射真实DOM的JavaScript对象,机会前要改变任何元素的情況,这么 是先在Virtual DOM上进行改变,而时会 直接改变真实的DOM。当有变化产生时,有另另另一个 新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。过后什么差别会应用在真实的DOM上。

正如上端你想看 的例子中,HTML, JavaScript和CSS都写在有另另另一个 文件之中,你不再前要在.vue组件文件中引入CSS。

而在React语法中,JavaScript与JSX被写入同有另另另一个 组件文件中。

(1)模块化,目前最热的辦法 是在项目中直接使用ES6的模块化,结合Webpack进行项目打包

(2)组件化,创造单个component后缀为.vue的文件,涵盖template(html代码),script(es6代码),style(css样式)

(3)路由,

vue非常小巧,压缩后min源码为72.9kb,gzip压缩后只有25.11kb,想比Angular为144kb,可不前要自驾搭配使用前要的库插件,类事路由插件(Vue-router),Ajax插件(vue-resource)等

而对于React而言,每当应用的情況被改变时,详细子组件时会重新渲染。当然,这可不前要通过shouldComponentUpdate這個 生命周期辦法 来进行控制,但Vue将此视为默认的优化。

vue.js官网:是一套构建用户界面的 渐进式框架。与某些重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,我希望 非常容易学习,非常容易与其它库或已有项目整合。自己面,Vue 详细有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的比较复杂单页应用。

React与Vue指在太大太大太大太大类事之处,类事亲戚亲戚朋友时会 JavaScript的UI框架,专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,某些的功能如路由、情況管理等是框架分离的组件。

Vue宣称可不前要减慢地计算出Virtual DOM的差异,这是机会它在渲染过程中,会跟踪每有另另另一个 组件的依赖关系,不前要重新渲染整个组件树。

什么属性也可不前要被使用在单文件组件中,尽管它前要在在构建时将组件转换为合法的JavaScript和HTML。

例子如下,亲戚亲戚朋友可不前要看看下面這個 列表在HTML中的代码是怎么写的:

Polymer 是原来由谷歌赞助的项目,事实上也是 Vue 的有另另另一个 灵感来源。Vue 的组件可不前要粗略的移觉于 Polymer 的自定义元素,我希望 两者具有类事的开发风格。最大的不同之指在于,Polymer 是基于最新版的 Web Components 标准之上,我希望 前要重量级的 polyfills 来帮助工作 (性能下降),浏览器三种并不支持什么功能。相比而言,Vue 在支持到 IE9 的情況下并不前要依赖 polyfills 来工作。

在 Polymer 1.0 版本中,为了弥补性能,团队非常有限的使用数据绑定系统。类事,在 Polymer 中唯一支持的表达式只有布尔值否定和单一的辦法 调用,它的 computed 辦法 的实现也并时会 很灵活。

Polymer 自定义的元素是用 HTML 文件来创建的,这会限制使用 JavaScript/CSS (和被现代浏览器普遍支持的语言形态)。相比之下,Vue 的单文件组件允许你非常容易的使用 ES2015 和你想用的 CSS 预编译外理器。

在部署生产环境时,Polymer 建议使用 HTML Imports 加载所有资源。而这要求服务器和客户端都支持 Http 2.0 协议,我希望 浏览器实现了此标准。这算不算可行就取决于你的目标用户和部署环境了。机会情況不佳,你前要用 Vulcanizer 工具来打包 Polymer 元素。而在这方面,Vue 可不前要结合异步组件的形态和 Webpack 的代码分割形态来实现懒加载 (lazy-loaded)。这同時 确保了对旧浏览器的兼容且又能减慢加载。

而 Vue 和 Web Component 标准进行层厚次的整合也是详细可行的,比如使用 Custom Elements、Shadow DOM 的样式封装。然而在亲戚亲戚朋友做出严肃的实现承诺过后,亲戚亲戚朋友目前仍等待的图片 的图片 相关标准成熟期的句子 图片 ,进而再广泛应用于主流的浏览器中。

机会CRA有太大太大太大太大选项,使用起来会稍微麻烦某些。這個 工具会逼迫你使用Webpack和Babel。而vue-cli则有模板列表可选,能按需创造不同模板,使用起来更灵活某些。

真实的Virtual DOM会比上端的例子更比较复杂,但它本质上是有另另另一个 嵌套着数组的原生对象。当新一项被添加這個 JavaScript对象时,有另另另一个 函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。计算差异的算法是高性能框架的秘密所在,React和Vue在实现上不怎么不同。

Knockout 是 MVVM 领域内的先驱,我希望 追踪依赖。它的响应系统和 Vue 也很类事。它在浏览器支持以及某些方面的表现也是让我印象深刻的。它最低能支持到 IE6,而 Vue 最低只有支持到 IE9。

随着时间的推移,Knockout 的发展已有所放缓,我希望 略显不怎么老旧了。比如,它的组件系统缺少完备的生命周期事件辦法 ,尽管什么在现在是非常常见的。以及相比于 Vue 调用子组件的接口它的辦法 显得不怎么笨重。

机会你有兴趣研究,你时会发现二者在接口设计的理念上是不同的。这可不前要通过本人 创建的 simple Todo List 体现出来。或许不怎么主观,我希望 太大太大太大太大人认为 Vue 的 API 接口更简单形态更优雅。

机会有着众多的类事处,亲戚亲戚朋友会用更多的时间在這個 块进行比较。这里亲戚亲戚朋友不只保证技术内容的准确性,同時 也兼顾了平衡的考量。亲戚亲戚朋友前要承认 React 比 Vue 更好的地方,比如更充裕的生态系统。

React 和 Vue 有某些类事之处,它们时会 :

React与Vue最大的不同是模板的编写。Vue鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素,太大太大太大太大我多了某些属性。

Vue与React最后有另另另一个 类事但略有不同之处是它们配套框架的外理辦法 。相同之指在于,有另另另一个 框架都专注于UI层,某些的功能如路由、情況管理等都交由同伴框架进行外理。

而在Vue中,则不前要使用如setState()类事的辦法 去改变它的情況,在Vue对象中,data参数太大太大太大太大我应用中数据的保存者。

不过就算有这么 多好处,我希望 相比Angular2,Vue还是有太大太大太大太大的过高 :

React与Vue都鼓励组件化应用。这本质上说,是建议你将你的应用分拆成有另另另一个 个功能明确的模块,每个模块之间可不前要通过为宜的辦法 互相联系。在Vue中,机会你遵守一定的规则,让我使用单文件组件.

Vue.js 的目标是通过尽机会简单的 API 实现响应的数据绑定和组合的视图组件。

React的开发工具:

https://cdn.deliciousbrains.com/content/uploads/2017/06/15151112/react-devtools.mp4

Angular 事实上前要用 TypeScript 来开发,机会它的文档和学习资源几乎详细是面向 TS 的。TS 有太大太大太大太大显而易见的好处 —— 静态类型检查在大规模的应用中非常有用,同時 对于 Java 和 C# 背景的开发者也是非常提升开发强度的。

然而,并时会 本人 都想用 TS —— 在中小型规模的项目中,引入 TS 机会并无需带来太大明显的优势。在什么情況下,用 Vue 会是更好的选泽,机会在无需 TS 的情況下使用 Angular 会很有挑战性。

最后,虽然 Vue 和 TS 的整合机会不如 Angular 这么 深入,亲戚亲戚朋友也提供了官方的 类型声明 和 组件装饰器,我希望 知道有少量用户在生产环境中使用 Vue + TS 的组合。亲戚亲戚朋友也和微软的 TS / VSCode 团队进行着积极的战略商务合作,目标是为 Vue + TS 用户提供更好的类型检查和 IDE 开发体验。

Ember 是有另另另一个 全能框架。它提供了少量的约定,一旦你熟悉了它们,开发会变得很高效。不过,这也愿因 学习曲线较高,我希望 并不灵活。这愿因 在框架和库 (添加一系列松散耦合的工具) 之间做权衡选泽。后者会更自由,我希望 也要求你做更多架构上的决定。

也太大太大太大太大我说,亲戚亲戚朋友最好比较的是 Vue 内核和 Ember 的模板与数据模型层:

上端的JSX库组中,index, key, details, orders 与 addToOrder时会 props,数据会被下传到子组件PastaItem中去。