谈谈Angular、Vue和React的一些看法

最新推荐文章于 2024-04-27 09:53:21 发布

魂断楼兰

最新推荐文章于 2024-04-27 09:53:21 发布

阅读量471

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/ziwutong88/article/details/82350814

版权

27 篇文章 1 订阅

订阅专栏

MVC:Model(模型) + View(视图) + controller(控制器)，主要是基于分层的目的，让彼此的职责分开
MVP:是从MVC模式演变而来，都是通过Controller或Presenter负责逻辑的处理，要求Model改变状态 + Model将新数据发送到view展示，用户得到反馈 + View负责展示，传送指令到Controller或Presenter
MVVM：MVVM(Model+View+ViewModel)是把MVC里的Controller和MVP里的Presenter改成了ViewModel。采用双向绑定，View的变动，自动反映在ViewModel；model数据的变动，也自动展示给页面显示。把Model和View关联起来就是ViewModel,负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model
使用MVVM的好处：
- 低耦合：View可以独立与Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
- 可重用性：可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑
- 独立开发：开发人员可以专注与业务逻辑和数据的开发(ViewModel),设计人员可以专注与界面(View)的设计
- 可测试性：可以针对ViewModel来对界面(View)进行测试。

HTML模板将会被浏览器解析到DOM中，AngularJS将会遍历DOM模板，来生成相应的NG指令，所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定，因此，NG框架是在DOM加载完成之后，才开始起作用的，它实用在大型的浏览器端，大型网站项目。
angular是整个html页面下的,单页面应用
Angular在scope模型上设置了一个监听队列，用来监听数据变化并更新view.每次绑定一个东西到view上时，Angular在幕后就会往$watch队列里插入一条$watch，用来检测它监视的model里面是否有变化的东西，
自带集齐丰富的指令，模板功能强大丰富，强大到显得有点臃肿
使用依赖注入模块，没有组件化的概念，复用性比较强，对整个开发团队比较有利

vue需要一个el对象进行实例化,
template:通过compile编译器把template编译成AST语法树(abstract syntax tree,即源代码的抽象语法结构的树状表现形式)，AST会经过generate(将AST语法树转化成render function字符串的过程)得到render函数，函数返回值是VNode,就是Vue的虚拟DOM节点，里面包含(标签名、子节点、文本等)，在经过patch变成真正的DOM,
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
- Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
- Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
- Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活
响应式组件可复用，无依赖

React主要是对虚拟dom进行操作，比如当页面列表内容局部发生改变时React会对虚拟dom进行操作，会对需要修改的 DOM 进行比较（DIFF），从而只选择需要修改的部分，React是组件化开发。非常适用于不是很复杂的移动端
速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
模块化：编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离，可以与已知的库或框架很好的配合使用
React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

三大主流框架的区别理解还不是很深刻，各位积极发言指正，以做修改

关注