vue、react、angular三大框架对比

Waxiangyu

概论

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;
})
阅读 3.9k

那就 javascript 吧
小白笔记,从一开始。
664 声望
28 粉丝
0 条评论
664 声望
28 粉丝
文章目录
宣传栏