Angular&React&Vue 概览

最新推荐文章于 2023-02-10 22:29:39 发布

我就是我呀……

最新推荐文章于 2023-02-10 22:29:39 发布

阅读量238

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_21954583/article/details/110556829

版权

组件

（一）、React

组件：

使用组件：

（二）、Angular

（三）、Vue

（四）、对比

在react中创建一个组件，基于jsx，封装一个完整的功能，混合状态、方法、模板、样式。

在angular中的组件用装饰器@component声明组件模板和样式，主要的类中属性和方法作为该组件的控制器，或是调用已声明的控制器。

在vue中的组件，模板、样式、控制器也是分开的，但是vue也支持jsx的写法。

组件渲染原理：

[1]解析vue2.0的diff算法（https://github.com/aooy/blog/issues/2）

[2]React’s diff algorithm(https://calendar.perfplanet.com/2013/diff/)

数据绑定

（一）、Angular

在vue或angular中实现双向数据绑定v-model、ngmodel就可以，React实现数据的双向绑定需要借助onchange()辅助实现，或借用插件。

（二）、Angular

Angular在scope 模型上设置了一个监听队列，用来监听数据变化并更新view。每次绑定一个model到 view 上时 AngularJS 就会往 watch队列里插入一条watch，用来检测它监视的 model 里是否有变化的东西。

将数据附加到 Scope 上，数据自身不会对性能产生影响，如果没有监视器来监视这个属性，那个这个属性在不在 Scope 上是无关重要的；Angular 并不会遍历 Scope 上的属性，它将遍历所有的观察器。

每个监视函数是在每次 $digest 过程中被调用的。因此，我们要注意观察器的数量以及每个监视函数或者监视表达式的性能。

（三）、Vue

vue.js 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

参考：

[1]https://www.jianshu.com/p/0520e1e8d23d(angular,vue,react数据双向绑定分析)

[2]https://github.com/DMQ/mvvm（Vue实现原理 - 如何实现双向绑定mvvm）

产生背景

（一）、Angular

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，React 本身只涉及UI层，如果搭建大型应用，必须搭配一个前端框架。Facebook官方使用的是 Flux 框架，在 React 的基础上，来组织代码和安排内部逻辑。

（二）、Angular

AngularJS是为了克服HTML在构建应用上的不足而设计的。它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS中，指令贯穿始终，一切从模块开始。

AngularJS主要考虑的是构建中大型CRUD应用。对一些DOM操作很频繁也很复杂的应用不适合。由于Angular 必须用 TypeScript 来开发，在中小型规模的项目中，引入 TS 可能并不会带来太多明显的优势。在这些情况下，用 Vue 会是更好的选择，因为在不用 TS 的情况下使用 Angular 会很有挑战性。

（三）、Vue

Vue核心库的主要功能在构建界面ui上，它依靠vue-router、vuex来组织项目，进行状态管理。这一点类比react。同时可以看到vue吸收了angular和react的优点加以优化，对于中小型项目来说更方便。

参考：