vue入门 vue与react和Angular的关系和区别
vue入门 vue与react和Angular的关系和区别
一、为什么学习vue.js
vue.js兼具angular.js和react的优点,并且剔除了他们的缺点
手册: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实现快速渲染
轻量级
响应式组件
服务端渲染
集成路由工具,打包工具,状态管理工具的难度低
优秀的支持和社区