手机版 欢迎访问it开发者社区(www.mfbz.cn)网站

当前位置: > 开发

简单讨论前端框架Vue和React的区别

时间:2021/9/20 16:51:28|来源:|点击: 次

目录

1. 前端框架是什么?

2. Vue和React的相似之处

3. Vue和React的区别


1. 前端框架是什么?

    前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件;例如Vue,React,Angular等;

(1)Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,自底向上逐层应用

(2)React 是一个用于构建用户界面的 JAVASCRIPT 库,由Facebook创建的JavaScript UI框架,(React推广了Virtual DOM并创造了新的语法-----JSX);

Virtual DOM(虚拟节点)是一个映射真实DOM的JavaScript对象;

JSX允许开发者在JavaScript中书写HTML(即HTML in JavaScript);

React推崇的是函数式编程单向数据流

(3)AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等;

2. Vue和React的相似之处

(1)虚拟Dom;

        Vue宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系(依赖追踪),则不需要重新渲染整个组件树。

        而对于React而言,每当应用的状态被改变时,全部子组件都会重新渲染。

(2)组件化;

(3)构建工具,React和Vue都有自己的构建工具,你可以使用它快速搭建开发环境。

 React可以使用Create React App (CRA),而Vue对应的则是vue-cli。

3. Vue和React的区别

(1)模板 vs JSX;

   Vue鼓励近似HTML的写法,写法接近标准HTML,只是多了一些属性;

<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
    </template>
</ul>

<ul>
  <pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key"  @order="handleOrder(key)" ></pasta-item>
</ul>

      React推荐JavaScript的语法扩展——JSX书写;


<ul className="pasta-list">
    {
        Object.keys(this.state.pastadishes).map(key =>
            <PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} />
        )
    }
</ul>

(2)状态管理 vs 对象属性;

Copyright © 2002-2019 某某自媒体运营 版权所有