前言

hello，大家好，最近袁小白一直在加班，可能是感觉受到公司的压迫快要超出我的界限了吧，所以最近想多看一些面试题，有一些就想记录下来，准备把每一道面试题都写一篇博客，最后在一片博客内汇总一下，这可真是的好的idea啊(大家可不要夸我聪明啊)，好了下面我们进入今天的正文，两大主流框架的相杀（没有想爱）.接下来我们会从各个维度来讨论着两大框架的优缺点。

正文

相似之处

组件化

vue和react都是偏向于组件式开发的，当你在开发一个较大的项目时，如果非组件式开发，那么可能会造成一个文件有成千上万行代码，这对后期的维护是十分不利的。

在vue中，你可以使用单文件组件来进行开发

<template>
    <div class="row">
        {{msg }}
    </div>
</template>

<script>
export default {
    name: 'pasta-item',
    props: ['item'],
    data:  function(){
        return{
            msg: 'nihao'
        }
    },
    methods: {
    }
}

</script>

<style scoped></style>

在react中，我们使用jsx来进行开发

import React from "react";

class Test extends React.Component {

    render() {
        const { details, index } = this.props;

        return (
            <div className="row">
                {details}
            </div>
        );
    }
}
export default Test;

props

既然讲到组件化了，那么我们也应该来谈下props，这个在两大框架中都存在的属性。在vue和react中，props都是用来接收父组件传递下来的值

props是用来

不同之处

facebook vs 尤雨溪

首先我们来看各自的背景，vue的是由尤雨溪大大开发的，现在也是有个团队正在维护，而react则是有facebook团队开发，并且是facebook团队在维护的，从这个角度上看，好像是react比较厉害的哈哈

template vs jsx

我们都知道，在vue中，是使用模板系统进行开发的，就是让你写html代码，只不过vue自定义了一些属性(v-for、v-if等等)

<ul>
    <li :key="item.id  v-for="item in arr>{{item.value}}</li>
</ul>

这些属性既可以在html中使用，也可以在单文件组件中使用的。而react是推荐使用jsx(后续会专门针对jsx写一篇博客)来写你的模板，同样的代码，使用jsx则如下

<ul>
    arr.forEach(item => {
        return <li :key="item.id>{{item.value}}</li>
    })
</ul>

对比jsx和模板系统，第一眼看的时候，可能大家是偏向于模板系统的，因为它更符合我们熟悉的html的风格，这可能也是大家为什么觉得vue比react简单的原因了吧。

其实vue也是可以使用jsx的，尤其是当我们写render的时候，这个使用还是比较痛苦的，所以我们可能更倾向于jsx，在vue中使用jsx的时候，我们需要安装一些依赖

安装依赖

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

安装完之后，我们只需要在.babelrc中配置一下即可在vue中书写jsx了

{ "presets": ["@vue/babel-preset-jsx"] }

state和data

我们知道，在react中我们是使用state来存储数据的，但是在vue中我们是使用data来存储数据的，这个是一个差异，在react中，如果我们想修改数据，我们却是要使用this.$setState()方法进行修改，在vue中修改data，我们可以直接赋值即可

// react

let a = [...this.state.a]
a.key = a.key + 1;
this.$setState({a});

// vue
export default {
    data: {
        a: 3
    },
    methods: {
        updateData() {
            this.a = 4
        }
    }
    
}

虚拟DOM

vue宣称可以更快的计算出虚拟DOM的差异，因为在渲染过程中，vue可以追踪到每个组件的依赖关系，所以不需要将所有的组件重新渲染，这在vue中是默认的。

但是在react中，每当组件的状态改变时，全部的子组件都会被重新渲染。虽然在react中有shouldComponentUpdate这个生命周期方法来控制是否渲染

Vue和react两大主流框架之争

前言

正文