概论
angular
angular是一个大而全的MVC框架,它提供了我们所需要的各种功能,如模块管理,双向绑定等等,它涵盖了开发中的各个层面,并且层与层之前都经过了精心调试
react
all in js。很多东西都得自己去手动处理。要学jsx,还有其它一些如redux。也能麻烦。
vue
提供的vue模板,让习惯了html,js,css分离,使代码看起来更方便。封装的一些东西对使用者比较友好,是三者中速度最快,体积最小的一个框架。
Vue宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
而对于React而言,每当应用的状态被改变时,全部子组件都会重新渲染。当然,这可以通过shouldComponentUpdate这个生命周期方法来进行控制,但Vue将此视为默认的优化。
优缺点
angular
- 优
是一个大而全的框架,适用于大中型项目。
- 缺
学习成本高
react
- 优
是一个小而精的库
- 缺
jsx,很多东西都得自己去手动处理。只注重view层的渲染。而把其它的东西都是有社区完成。也造成了,比如react-router4就跟之前不一样。版本变更不一致的坑爹行为。但是vue和angular则不会都是由官方维护,和框架一起发布变更。
vue
- 优
封装的一些东西对使用者比较友好,是三者中速度最快,体积最小的一个框架
- 缺
选型
angular
如果你需要在一个大型的框架内获取技术资源,框架内的技术通常很容易移植。或者你需要在框架中训练开发人员,并且还有一定的信心,他们会在短期内获得一定的开发能力。
如果你的web
应用能够很好的转化为标准的模型——视图模式,那么你也可以忽略其它直接使用。
react
如果你很少需要手把手指导,并且正在寻找更好的库而不是全面的框架,那么react
可能是正确的,这一过程,你不仅要对你的团队和组织的能力保持忠诚,还要在你的初始开发过程中,以及在整个应用程序的长期维护过程中保持忠诚。
vue
如果你有一个传统的web
应用程序,并需要一个强壮稳健的应用程序层,那么vue
可能是一个很好的选择,它有清晰的模式,即使没有经验的团队也能正确的使用它。
v-model
的实现
react
class Input extends Component{
valueChange=(e)=>{
this.setState({value:e.target.value})
}
render(){
<div>
<input type="text" value={this.state.value} onChange={this.valueChange}/>
</div>
}
}
angular
<input [ngModel]='todo.text' (ngModelChange)='todo.text=$event'/>=
<input [(ngModel)]='todo.text'/>
@Directive({
selector:'[ngModel]',
host:{
'[value]':'ngModl',
'(input)':'ngModelChanged.next($event.target.value)'
}
})
class NgModelDirective{
@Input() ngModel:any;
@Output() ngModelChanged:EventEmitter=new EventEmitter()
}
vue
<input type='text' value='' id='J_input'/>
<p id='J_p'></p>
let obj={};
Object.defineProperty(obj,'say',{
set:function(value){
document.getElementById('J_input').value=value;
document.getElementById('J_p').innerHTML=value;
}
})
document.addEventListener('keyup',function(e){
obj.say=e.target.value;
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。