谈谈Angular、Vue和React的一些看法
首先谈一下框架模式MVC、MVP、MVVM
- 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)进行测试。
AngularJS
- HTML模板将会被浏览器解析到DOM中,AngularJS将会遍历DOM模板,来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定,因此,NG框架是在DOM加载完成之后,才开始起作用的,它实用在大型的浏览器端,大型网站项目。
- angular是整个html页面下的,单页面应用
- Angular在
scope
模型上设置了一个监听队列,用来监听数据变化并更新view.每次绑定一个东西到view上时,Angular在幕后就会往$watch队列里插入一条$watch
,用来检测它监视的model里面是否有变化的东西, - 自带集齐丰富的指令,模板功能强大丰富,强大到显得有点臃肿
- 使用依赖注入模块 ,没有组件化的概念,复用性比较强,对整个开发团队比较有利
Vue
- 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
- React主要是对虚拟dom进行操作,比如当页面列表内容局部发生改变时React会对虚拟dom进行操作,会对需要修改的 DOM 进行比较(DIFF),从而只选择需要修改的部分,React是组件化开发。非常适用于不是很复杂的移动端
- 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
- 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
- 模块化:编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离,可以与已知的库或框架很好的配合使用
- React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。
三大主流框架的区别理解还不是很深刻,各位积极发言指正,以做修改