vue入门 vue与react和Angular的关系和区别

2019-10-17  本文已影响0人  townof1997

vue入门 vue与react和Angular的关系和区别

一、为什么学习vue.js

vue.js兼具angular.js和react的优点,并且剔除了他们的缺点

官网:http://cn.vuejs.org/

手册:http://cn.vuejs.org/v2/api/

二、vue.js是什么

Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手

Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上增量开发的设计

vue的核心库"只关注视图层",并且"非常容易学习",非常容易与其他库或者已有的项目整合,另一方面,vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页面应用

vue的目标是通过尽可能简单的API实现"响应的数据绑定"和"组合的视图组件"

三、MVC/MVP/MVVM的区别

复杂的软件必须有清晰合理的架构,否则无法开发和维护

MVC、MVP和MVVM否是用来解决界面呈现和逻辑代码分离而出现的模式

通俗的讲:就是方便大多数人开发和维护出现的代码分离模式

课外拓展:http://www.cnblogs.com/lori/p/3501764.html

四、MVC

视图(view):用户界面

控制器(controller):业务逻辑

模型(Model):数据处理

五、MVP

MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示。作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会从直接Model中读取数据而不是通过 Controller。

六、MVVM

MVVM在概念上是真正将页面与数据逻辑分离的模式,在开发方式上,它是真正将前台代码开发者(JS+HTML)与后台代码开发者分离的模式(asp,asp.net,php,jsp)

双向绑定:view的变动,自动反映在viewModel,反之亦然

七、vue对比其他框架

1、vue-angular

1)、vue在设计之初参考了很多angular的思想

2)、vue相比于angular来说更加的简单

3)、vue相当于angular要变得小巧很多,运行速度比angular快

4)、vue和angular绑定都可以用{{}}

5)、vue指令用v-xxx,angular用ng-xxx

6)、vue中数据放在data对象里面,angular数据绑定在$scope上面

7)、vue有组件化概念,angular中没有

2、vue-react

他们都有:

1)、react和vue都是用虚拟DOM Virtual DOM

2)、React和Vue都提供了响应式(Reactive)和组件化(Componsable)的视图组件

3)、React和vue都将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库

4)、React使用JSX渲染页面,Vue使用简单的模板

5)、Vue比react运行更快
八、Angular特性:

由自己实现一套模板编译规则,数据变化依赖脏检查,
基本属性包括:数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块。
运行效率较低,数据变更检测方式。
学习angular会迫使你学习特有的预发,上手成本很大,代码看起来很干净
依赖注入,即一个对象将依赖项提供给另一个对象(客户端)的模式。导致更多的灵活性和更干净的代码。
Angular 最适合单页应用(SPA),因为它可能太臃肿而不能用于微服务。
框架比较臃肿,每次用啥功能要引入一大堆东西
Angular错误提示不够清晰明显,对于初级开发者,很难看懂Angular的错误提示。(个人认为这是最大的不好之处,当初学习这个遇到很多坑啊),而且定位bug很难。
面向对象编程的思想,Angular由后端开发人员设计的前端框架。
详细比较:React和Vue的区别

九、React特性:

单向绑定,先更新model,然后渲染UI元素,数据在一个方向流动,使得调试更加容易。代码冗余,各种生命周期太麻烦,刚开始接触好难记。
用了虚拟DOM。(对虚拟DOM的理解刚开始我不是很理解概念,建议大家去看【深入REACT技术栈】这本书有很好的讲解)
更适合大型应用和更好的可测试性
Web端和移动端原生APP通吃
更大的生态系统,更多的支持和好用的工具
组件生命周期
constructor
componentWillMount
componentDidMount
componentWillUpdate
componentDidUpdate
render
十、Vue特性

模板和渲染函数的弹性选择
简单的语法和项目配置
更快的渲染速度和更小的体积四
生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
十一、Vue和React共同点

用虚拟DOM实现快速渲染
轻量级
响应式组件
服务端渲染
集成路由工具,打包工具,状态管理工具的难度低
优秀的支持和社区

上一篇下一篇

猜你喜欢

热点阅读