今天的考核题目: 你知道React和Vue的区别吗? skr，skr

React 和 Vue 的区别

博主面了几家公司，看简历上写着使用Vue.js框架，就会问，你能说一说 vue 和 react的区别吗 ？react 听过，没用过，因此就只能尴尬的说不怎么了解react。这不，最近刚学了react (不断爬坑中)，同时看了些博客文章，当一回搬运工，若有错误，请指出 ～

简单的自我介绍一下

React是由Facebook建立的JavaScript UI框架，它的诞生改变了JavaScript世界，最大的一个改变就是React推广了Virtual DOM， 而且创造了新的语法 - JSX，JSX 容许在JavaScript中写html代码。

Vue是由尤大大开发的一个MVVM框架，它采用的是模板系统而不是JSX。

安利一波

Virtual DOM

一听可能有点懵逼 ？我也很懵逼。因此咱们来看看别人怎么说的 ：Vue.js(2.0版本)与React的其中最大一个类似之处，就是他们都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思：虚拟DOM，DOM树的虚拟表现。

Virtual DOM 是一个映射真实DOM的JavaScript对象，若是咱们要改变任何元素的状态，那么是先在Virtual DOM 上先进行改变，而不是直接地去修改真实的DOM。
    好比在Vue中，咱们将原来的节点改为这样 :
        // 原DOM
        <div class='box'>
            <p class='label'>
                <span>{{ label }}</span>
            </p>
        </div>

        // 修改的DOM
        <div class='box'>
            <p class='label'>
                <span>{{ label }}</span>
                <span>{{ username }}</span>
            </p>
        </div>
        
    咱们往p节点中新增了一个span节点，因而咱们一个新的Virtual DOM对象会被建立。
    而后新的Virtual DOM 和旧的Virtual DOM比较，经过diff算法，算出差别，而后这些差别就会被应用在真实的DOM上

复制代码

Vue 很“ 嚣张 ”，它宣称能够更快地计算出Virtual DOM的差别，这是因为它在渲染过程当中，因为vue会跟踪每个组件的依赖收集，经过setter / getter 以及一些函数的劫持，可以精确地知道变化，并在编译过程标记了static静态节点，在接下来新的Virtual DOM 而且和原来旧的 Virtual DOM进行比较时候，跳过static静态节点。因此不须要从新渲染整个组件树。

React默认是经过比较引用的方式进行，当某个组件的状态发生变化时，它会以该组件为根，从新渲染整个组件子树。若是想避免没必要要的子组件从新渲染，你须要在全部可能的地方使用PureComponent，或者手动实现shouldComponentUpdate方法。可是Vue中，你能够认定它是默认的优化。

构建工具

React 采用 Create-React-App， Vue 采用的是Vue-Cli，这两个工具很是的好用啊，大兄弟，都能为你建立一个好环境，不过Create-Reacr-App会逼迫你使用webpack和Babel，而Vue-cli能够按需建立不一样的模板，使用起来更加灵活一点

数据流

（这里借用一波言川老铁的图，下边会贴出连接）

很直观的，咱们能够看到，在Vue2.x中，只能parent -> Child <-> DOM的形式，而React只能单向传递，React一直提倡的是单向数据流，数据主要从父节点传递到子节点（经过props）。若是顶层（父级）的某个props改变了，React会重渲染全部的子节点。咱们只能经过setState来改变状态。

模板渲染方式不一样

前面说了，Vue和React的模板有所区别，React是经过JSX来渲染模板，而Vue是经过扩展的HTML来进行模板的渲染。React经过原生JS实现模板中的常见语法，好比说条件啊、循环啊、三元运算符啊等，都是经过JS语法实现。而Vue是在和组件代码分离的单独模板中，经过指令v-if、v-for等实现。

这里react比较好点，好比咱们要引用一个组件，react直接import 引入，而后能够直接在render中调用了，可是！！vue须要import以后，还要在components里去声明，才能用，好气哦 ～

Vuex 和 Redux

在Vue中，咱们是经过Vuex进行状态管理，而在React中，咱们是经过Redux进行状态管理。可是这二者在使用上仍是有区别的。

在vuex中，咱们能够经过在main.js中，引入 store文件夹，并把store挂载到new Vue实例中，这样咱们能够直接经过$store灵活使用。

• 你能够经过dispatch和commit进行更新数据，经过this.$store.state.xx读取数据
• 或者你能够经过mapState / mapActions 进行vuex的操做

而在React中，咱们须要每个组件都引入connect，目的就是把props和dispatch链接起来。

另外！！！咱们vuex能够直接dispatch action也能够commit update，可是redux只能经过dispatch，而后在reducer里，接收到action，经过判断action的type，从而进行对应的操做，redux不能直接调用reducer进行修改！！

Redux使用的是不可变的数据，而Vuex的数据是可变的，Redux每次修改更新数据，其实就是用新的数据替换旧的数据，而Vuex是直接修改原数据

    Redux 在检测数据变化的时候，是经过 diff 的方式比较差别的，而Vuex其实和Vue的原理同样，是经过 getter/setter来比较的，由于在vue实例的时候，进行了依赖收集。
复制代码

不差上下？

反正我以为他们两个都好，skr，skr，若是你想作一个小型项目就用vue，想作大型项目就用react，我是不知道怎样算小型，怎样算大型，我为所欲为，想用哪一个就用哪一个，我不会告诉你，我都是作的我的小项目 ～

---

相关连接

• 📢 我的博客

• 言川 - 关于Vue和React区别的一些笔

• Vue 官网 - 对比其余框架

• 众成翻译 - Vue vs React: Javascript 框架之战