vue和html5区别,简单描述 vue 和其他框架的区别

Posted 2022-04-07 虎子

        现在vue已经是前端主流的框架了，采用MVVM模式，虚拟dom，diff算法，数据双向绑定，提供响应式和组件化的视图组件。将注意力集中保持在核心库。体积小，性能好，生态系统庞大，发展也很不错。相对应的还有React，Angular，Riot，Ember等框架，那么为什么要推荐使用vue呢，他较于其他框架优点是什么呢? 更强大的React跟他有什么区别呢？

vue

vue的优点：

Vue学习简单， API简单，模式拥抱传统的web，入手快，适合快速开发

社区 和官网都在更新发展相对于的功能，React的JSX，Angular的TS等都可以支持，Angular的watcher慢等问题在vue中都得到了相应的解决

性能更好，体积更小

构建工具webpack等有默认配置，可以让你专注于应用，但同时又很灵活，可以根据你的需求配置

基于依赖追踪的观察系统并且异步队列更新，所有数据变化都是独立触发的，除非他们之间有明确的依赖关系

组件指令，生命周期，数据流都更清楚

在普通js对象上建立响应，提供自动化计算属性

和React比较

某个组件状态发生变化时，以该组件为根，重新渲染整个组件子树，(而vue会自动追踪)

css 也在JSX中，vue的模板形式比jsx读写起来更自然，提高开发效率，因为你更熟悉传统的web写法。而且vue的v-on等修饰符的功能React需要很多代码实现

React 学习更陡峭，vue的路由库和状态管理库都是由官方维护支持于核心库同步更新的，而React则给社区维护，生态系统相对分散，但是React的生态更繁荣。

和Angular.js比较

复杂性： VUE在api与设计上更简单，可以快速学习并投入开发

灵活性和模块化：Vue有vuecli可以快速构建。配置默认，不需要花费太多的时间在配置上，你可以专注于应用本身。同时提供了根据实际需求调整每个工具配置的灵活性，

数据绑定：Vue在不同组件内强制使用单向数据流，这使得数据流更加清晰易懂

指令和组件：vue的指令和组件分的更清晰

需要重量级别的polyfills来帮助，性能下降

浏览器本身不支持这些功能

computed方法不灵活

vue只能支持到IE9，(但是他可以支持到IE6)

发展缓慢，略显老旧，系统缺少完备的生命周期事件方法

接口设计理念不同

vue在普通js对象上建立响应，提供自动化计算属性，(而Ember是在Ember对象上手工为计算属性声明依赖)

vue的模板语法可以用全功能的js表达式，(而handlebars的语法和帮助函数很受限)

性能上，vue比ember好很多，vue能自动批量更新，(而Ember需手动管理)

vue性能更好(riot使用遍历DOM树)

vue有更多的成熟工具支持比如webpack，(riot构建靠社区)

大白话就是：

vue 和其他框架相比较

React：规模上学习曲线陡峭，性能上需手动实现方法避免不必要的子组件的渲染，html上要使用JSX 不如传统的HTML,CSS入手快，甚至现在css都要在jsx中。对新手或者想要快速开发一个项目的人员不友好，还要去学习JSX，想把原来项目迁移成新库的话也不是很友好。而且vue中的v-on等指令在react中需要大量代码实现。

React的跨平台很强大，但是vue现在也有和Weex合作，vue也支持JSX快速构建项目等React有的功能。

Angular1：API复杂，灵活度不如VUE，指令组件划分不清晰，watcher多时性能越来越差

Angular2：学习成本大，必须要用TS，体积要比vue大，中小型项目不需要，不能快速的开发项目，要先学习

Rnockout 发展缓慢

Ember需要手动

Riot 构建工具不行

Polymer需要额外的工具，computed方法不灵活

下面是各个框架详细的介绍

一、React

1. 运行时性能

Vue应用中， 组件的依赖是在渲染过程中自动追踪的，所以系统精准的知道哪个组件确实需要被重新渲染，而React对于不必要重渲染的子组件时需要手动实现shouldComponentUpdate方法

2. HTML&&css

css也用JSX处理，并不是每个开发者都喜欢，vue也支持JSX，迁移的话vue更贴合传统的写法，这样新人参与更快

3. 规模

React 学习更陡峭，vue的路由库和状态管理库都是由官方维护支持于核心库同步更新的，而React则给社区维护，生态系统相对分散，但是React的生态更繁荣。

React的create-react-app 有一些局限性

4. 原生渲染

React Native 能同时跨多平台开发。vue 在和weex(阿里)合作，但成熟度不如weex

5. MobX

Mbox+react 月等于Vue

6. Preact 和其他类React库

类 React 的库们往往尽可能地与 React 共享 API和生态。但生态更小。因为这些库无法 100% 兼容 React生态中的全部，部分工具和辅助库也可能无法使用。或者即使看上去能工作，但也有可能随时发生不兼容，除非你用的这个类 React 库官方与 React 保持严格一致。

二、AngularJS(Angular1)

2009年诞生的JS框架，后被谷歌收购。核心功能：MVC,模块化，自动化双向数据绑定，语义化标签，依赖注入等。是以一个js文件形式发布的，可以通过script标签添加到网页中，vue早起开发的灵感来源

1.指令和组件

每件事情都是指令来做的，组件只是一种特殊的指令.vue 中指令和组件分的更清楚，指令只封装DOM操作，而组件代表一个自给自足的独立单元

2.灵活性

Angular必须遵守指定的规则，灵活性差

3.复杂性

API和设计比VUE复杂一些

4.运行时性能

watcher越多，就越慢，因为作用域内每一次变化，所有的watch都要重新计算。并且如果一些watcher触发另一个更新，脏检查循环可能要运行多次，要用深奥的技术，解决脏检查循环的问题，有时没有简单的办法来优化有大量watcher的作用域

三、Angular(Angular2)

1.TS

必须用TypeScript开发，在中小型项目中，TS并不是所有人都想用的。而Vue可以用也可以不用

2.运行时性能

运行时候性能都很快

3.体积

虽然体积在使用了tree-shanking和AOT后已经减小了许多， 但是还是比vue大

4.灵活性

Vue更灵活

5.学习曲线

学习曲线陡峭，API很大，要理解很多概念才能有效的工作。

设计目标是针对大型的复杂应用，但是这样对一些经验不丰富的开发者非常的不友好

以下都是一些小众的框架

四、Polymer.js：

谷歌2013年发布的一个新的webUI框架。和vue比较相似，vue的灵感来源之一

缺点

- computed方法的实现不灵活

- 基于web components 标准之上，需要重量级的polyfills来帮助工作，那么性能就会下降

- 浏览器本身不支持这些功能，而vue支持IE9的情况下不需要依赖polyfills来工作

复制代码

五、Knockout.js

微软出版的MVVM模型领域内的先驱，兼容IE6，核心功能：属性监控和依赖追踪，声明式绑定， 模板机制

缺点：

- 发展缓慢

- 缺少完备的生命周期事件

复制代码

六、Riot.js

MVP(模型-视图-呈现)开源客户端框架，特点体积小，不足1kb，但可以构建大规模的web应用程序，现在是Riot3.8版本，已经趋于稳定，可以用在生产环境

缺点：

- 国内相关资料很少，所以更适合定制化比较高的项目

- 微型场景更适合Riot，不想要太多的外部依赖，又需要组件化，数据驱动等现代化框架的能力

- 好用的Riot构建工具并不多

复制代码

七、Ember.js

是一个MVC模式的开源的js客户端框架，2011年12月发布，属于社区开发者，文档很友好，ember-cli快速构建，提供了大量的约定，只要按照约定，就会变得非常高效

缺点：

- 学习成本大，而且并不灵活

- 页面渲染慢

- 框架体积大

复制代码