Angular、Vue、React三大框架的区别

一、理解MVVM模式

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

理解MVVM模式

聊聊MVC、MVP、MVCC

MVC与MVVM模式的区别

二、Vue、React、Angular三大框架的区别

Vue和React的区别

1、相似点

1）组件化

​ 三大框架中，都是提倡组件化开发的框架，所以，比如当你在开发vue的项目时，具备组件化的思想，在平常开发中能够有意识的去抽离展示型组件，和容器型组件，那么，在开发react 和angular时，你只会得心应手，不会处处为难

2）都是数据驱动视图

​ 三大框架，都是属于MVVM框架，数据驱动视图的思想始终贯穿始终，所以我们在开发时，只需要关注数据变化即可，虽然使用方式不尽相同，React 属于函数式，Angular 和Vue 属于声明式编程，但是，数据驱动的思想不变，比如react 使用setState赋值，而vue 和angular 使用显式直接赋值他们最后的目的都是改值，从而触发页面更新

3）共同的开发套路

​ 在三大框架中，由于都遵循组件化思想，所以，都有着相同的开发套路，只是使用方式略有差别，比如，都有父子组件传递，都有数据管理框架，都有前端路由，都有插槽，只不过在anguar中叫做投影组件,在react 中叫组合，都能实现一些所谓的高阶（hoc）函数

所以当你掌握其中一个框架以后，那么在其他框架遇见上述类似的业务场景时，只需百度只需百度其他框架类似的用法即可，到这里我终于明白刚入行是，领导告诉我，学程序，就是学思想。有了思想，框架之间就会没有壁垒。

2、不同处

1）模板渲染方式的不同

vue与react都推崇组件式的开发理念，但是在设计的核心思想上有很大差别。

• 在表层上， 模板的语法不同

  • React 是通过JSX渲染模板
  • 而Vue是通过一种拓展的HTML语法进行渲染

  但其实这只是表面现象，毕竟React并不必须依赖JSX。

  在深层上，模板的原理不同，这才是他们的本质区别：

  • React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的
  • Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现

  对这一点，我个人比较喜欢React的做法，因为他更加纯粹更加原生，而Vue的做法显得有些独特，会把HTML弄得很乱。举个例子，说明React的好处：

  react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

2）监听数据变化的实现原理不同

• Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能。defineProperty和Proxy
• React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染

为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而React更强调数据的不可变。

3）数据流的不同

在 Vue2.x 中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。 所以现在我们只有 组件 <--> DOM 之间的双向绑定这一种。

然而 React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。

4）组件通信方式的不同

其实这部分两个比较相似。

在Vue 中有三种方式可以实现组件通信：

• 父组件通过 props 向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据，而通过 事件的机制来处理子组件向父组件的通信
• 子组件通过 事件 向父组件发送消息
• 跨组件传递使用provide / inject

在 React 中，也有对应的三种方式：

• 父组件通过 props 可以向子组件传递数据或者回调
• 跨组件传递使用 context

可以看到，React 本身并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

5）事件处理(@Click vs onClick)

• Vue中使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常使用v-on接收一个需要调用的方法名称
• React采用合成事件。其沿袭了事件委托的思想。在 React 中，除了少数特殊的不可冒泡的事件（比如媒体类型的事件）无法被事件系统处理外，绝大部分的事件都不会被绑定在具体的元素上，而是统一被绑定在页面的 document 上。当事件在具体的 DOM 节点上被触发后，最终都会冒泡到 document 上，document 上所绑定的统一事件处理程序会将事件分发到具体的组件实例。在分发事件之前，React 首先会对事件进行包装，把原生 DOM 事件包装成合成事件。（React17之前）

​ 浅谈React合成事件

​ React合成事件及简单模拟实现

6）Diff算法

3、Angular的特殊之处

• 组件
• 模板
• 指令
• 依赖注入
• 面向对象

​ Angular是一个面向对象的框架。它使用了面向对象的编程概念和原则，例如封装、继承和多态。在Angular中，应用程序被组织为一系列的组件，每个组件都有自己的属性和方法，可以通过继承和组合来实现代码的重用和模块化。此外，Angular还使用了依赖注入（Dependency Injection）的设计模式，通过将依赖项注入到组件中，实现了松耦合和可测试性。因此，可以说Angular是一个面向对象的框架，它借鉴了面向对象的思想来构建可维护、可扩展的应用程序。

​ 之前之所以说angular 又大又全，是因为，他不需要借助社区的力量，仅仅靠自己就能实现一个产品从开始到上线的解决方案，比如，他提供完备的单元测试方案，这里你在新建组件的时候都会给你一个测试的ts，在比如，他会提供开发时所需的所有服务，比如http服务，比如router服务，比如公共数据管理服务service，这些angular 全部完备，他更像是一个后端语言，严格的类型检查，拥抱ts，强制性分层，以及更好的工程，面向对象编程的思想。angular很高大全同时也很复杂，angular官方库给了你一切你想要的，使用angular技术栈，基本上你不用对组件选型浪费太多时间精力（对比react）。

面向对象的优点

1. 模块化和重用性：面向对象编程通过将代码组织为对象和类的集合，实现了模块化和重用性。对象可以被看作是独立的实体，具有自己的属性和方法。这使得开发者可以将代码分解为小的、可重用的模块，提高了代码的可维护性和可扩展性。
2. 封装和信息隐藏：封装是面向对象编程的核心概念之一，它将数据和相关的操作封装在对象内部，对外部隐藏了实现的细节。这提供了更高的安全性和隐私性，并且使得对象的使用者只需要关注对象的公共接口，而不需要了解其内部实现。
3. 继承和多态：继承允许一个类继承另一个类的属性和方法，从而实现代码的重用和扩展。通过继承，可以创建一个基类（父类）和派生类（子类）的层次结构，子类可以继承父类的特性，并且可以添加自己的特定功能。多态性允许使用基类的引用来引用派生类的对象，从而实现了灵活性和可扩展性。
4. 可维护性和可扩展性：面向对象编程的模块化和封装特性使得代码更易于维护和扩展。由于代码被组织为对象和类，当需要修改或添加功能时，只需修改或添加相关的对象或类，而不需要修改整个代码库。这提高了代码的可维护性，并且使得应对变化和需求的变化更加容易。
5. 可测试性：面向对象编程的封装和依赖注入特性使得代码更易于测试。由于对象的行为和状态被封装在对象内部，可以更容易地编写单元测试来验证对象的功能。此外，依赖注入使得可以轻松地替换对象的依赖项，以进行单元测试或模拟。

总的来说，面向对象编程提供了一种结构化和模块化的方法来开发软件，具有模块化、重用性、封装、继承、多态、可维护性和可测试性等优点。这些优点使得面向对象编程成为一种流行的编程范式，并被广泛应用于软件开发领域。

依赖注入

Angular 依赖注入 - 全面解析

三、三种框架适应于什么情况

• Angular
  • 比较完整，仅靠自己就能实现一个产品从开始到上线的解决方案。基于面向对象的思想，对于大型项目，利于维护
  • 类似Springboot，适合后端开发人员快速上手
  • 学习成本较高
• Vue
  • 封装程度高，学习成本低，利于上手
• React
  • 自由度高
  • JS化程度高