Vue, React, Angular--对比/区别

男娘i 2023-10-01 11:41 26阅读 0赞

原文网址：[Vue, React, Angular--对比/区别\_IT利刃出鞘的博客-CSDN博客][Vue_ React_ Angular--_IT_-CSDN]

## 简介 ##

本文介绍前端三大框架（Vue, React, Angular）的相同点和不同点。

## 相同点 ##

1.  单页应用
    
    1.  都用于构建单页应用
2.  组件化
    
    1.  三者都是基于工程化、组件化、模块化的开发方式
3.  数据驱动视图
    
    1.  都是MVVM类型的框架。
    2.  数据驱动视图的思想始终贯穿始终，我们在开发时，只需要关注数据变化即可。
4.  模块
    
    1.  都有这些模块：组件、路由、模板、数据请求、状态管理

## 不同点 ##

<table> 
 <tbody> 
 <tr> 
 <td style="width:95px;"> 项 </td> 
 <td style="width:260px;"> Vue </td> 
 <td style="width:324px;"> React </td> 
 <td style="width:127.55pt;"> Angular </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 维护者 </td> 
 <td style="width:260px;"> 个人（尤雨溪） </td> 
 <td style="width:324px;"> Facebook公司 </td> 
 <td style="width:127.55pt;"> Google公司 </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 首发时间 </td> 
 <td style="width:260px;"> 2014年2月 </td> 
 <td style="width:324px;"> 2013年3月 </td> 
 <td style="width:127.55pt;"> 2016年9月 </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 学习曲线 </td> 
 <td style="width:260px;"> 入门简单 </td> 
 <td style="width:324px;"> 入门稍难 </td> 
 <td style="width:127.55pt;"> 入门难度很大 </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 优点 </td> 
 <td style="width:260px;"> 入门简单 </td> 
 <td style="width:324px;"> 灵活度高。 </td> 
 <td style="width:127.55pt;"> 适合超大项目 </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 缺点 </td> 
 <td style="width:260px;"> 灵活度相对React差一点。 </td> 
 <td style="width:324px;"> 很多东西要自己处理，因为封装的不够好。 </td> 
 <td style="width:127.55pt;"> 上手难度很高 </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 框架特点 </td> 
 <td style="width:260px;"> HTML, CSS, JavaScript分开 </td> 
 <td style="width:324px;"> All in JavaScript。 （HTML, CSS, JavaScript都写在JavaScript中） </td> 
 <td style="width:127.55pt;"> HTML, CSS, JavaScript分开 </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 开发复杂度 </td> 
 <td style="width:260px;"> 开发简单。 原因：封装的很好。 声明式编程，方便快捷。 </td> 
 <td style="width:324px;"> 开发较麻烦。 很多东西需要自己手动处理。要学jsx，还有其它一些如redux。 函数式编程，较麻烦。 </td> 
 <td style="width:127.55pt;"> 开发简单。 原因：封装的很好 声明式编程，方便快捷。 </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 适用场景 </td> 
 <td style="width:260px;"> 大中小项目 </td> 
 <td style="width:324px;"> 大中小项目 </td> 
 <td style="width:127.55pt;"> 超大项目 </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 模型 </td> 
 <td style="width:260px;"> Virtual DOM（虚拟的文档对象模型） </td> 
 <td style="width:324px;"> Virtual DOM（虚拟的文档对象模型） </td> 
 <td style="width:127.55pt;"> MVC（模型-视图-控制器） </td> 
 </tr> 
 <tr> 
 <td style="width:95px;"> 数据流向 </td> 
 <td style="width:260px;"> 双向绑定 </td> 
 <td style="width:324px;"> 单向数据。 （只能组件来控制DOM，DOM变动不能反应到组件） </td> 
 <td style="width:127.55pt;"> 双向绑定 </td> 
 </tr> 
 </tbody> 
</table>

[Vue_ React_ Angular--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122289022