目录

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）状态管理state vs 对象属性data；

（3）Vue 使用的是可变数据，而React更强调数据的不可变;

（4）Vue和React的数据绑定原理；

在React应用中，当某个组件的状态发生变化时，会以该组件为根，重新渲染整个组件子树。当然也可通过shouldComponentUpdate生命周期方法来进行控制pure render，但Vue将此视为默认的优化；

vue中实现数据绑定靠的是数据劫持（Object.defineProperty()）+发布-订阅模式。在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件需要被重渲染。