vuereactangular三大框架对比

Posted 2021-09-14 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;
})