为什么我更喜欢 Vue 而不是 React

结论

市面上有很多优秀的 Web 开发框架。我相信每个框架都能用来创建你想要的网站。选择哪个框架完全取决于个人喜好。记住，你也可以不使用任何框架。

就我个人而言，我通常会选择Vue。以下是我选择 Vue 而不是最常用的框架React库。
（其实我也有选择 React 而不是 Vue 的理由，但我并不像以下几点那么看重它们）

无需使用构建工具

使用 Vue 和 React，您无需构建网站。只需使用原生 JavaScript、HTML 和 CSS 即可完成。让我们创建一个按钮，用于统计其点击次数。

反应

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</head>

<body>
    <div id="app"></div>
    <script>
        function Button() {
            const [counter, setCounter] = React.useState(0);

            return React.createElement(
                'button',
                { onClick: () => setCounter(counter + 1) },
                counter
            );
        }
        const domContainer = document.querySelector('#app');
        ReactDOM.render(React.createElement(Button), domContainer);
    </script>
</body>

</html>

Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <button @click="counter++">{{counter}}</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0
            }
        });
    </script>
</body>
</html>

	尺寸	代码字符	缺点
反应	40.7 千字节	740	不支持 JSX，这是 React 的主要编码方式代码将因包含许多元素而变得混乱两个脚本导入
Vue	32.6 千字节	389	子组件需要使用 HTML 模板字符串由于组件过多，代码会变得混乱

在这种情况下，我更喜欢 Vue，因为它可以很容易地为网站添加反应性，并且代码与具有构建步骤的项目中的“普通” Vue 几乎相同。

命令行界面

React 提供了Create React App来设置你的项目。但是，当你需要添加诸如 router、Sass、linter 等功能时，你必须事后手动操作。

Vue 提供了一个CLI，你可以在创建项目时选择所需的功能。这使得项目创建过程变得顺畅而轻松。

模板

这两个框架之间的一个巨大区别在于 HTML 的创建方式。React 使用 JSX，允许你在同一个渲染函数中组合 JavaScript 和 HTML。对我来说，这感觉很快就会变成意大利面条式的代码。

在 Vue 中，你可以在模板标签中编写 HTML，这样你就可以编写带有指令的普通 HTML 来添加功能。（JSX 也是 Vue 中的一个选项，但使用得并不多。）请查看我的下一个理由，了解两者之间差异的示例。

绑定输入值

反应

import React from 'react';

function InputBind() {
    const [text, setText] = React.useState('');

    return (
        <>
            <input type="text" onChange={e => setText(e.target.value)} />
            <p>{text}</p>
        </>
    );
}

export default InputBind;

Vue

<template>
    <div>
        <input type="text" v-model="text">
        <p>{{text}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            text: ''
        }
    }
}
</script>

有条件渲染

反应

选项 1：三元运算。但其可读性并不总是很好。

import React from 'react';

function CondinionallyRender() {
    const [show, setShow] = React.useState(true);

    return (
        <>
            <input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
            {show
                ?
                <p>👋👋👋👋👋</p>
                :
                <p>💨</p>
            }
        </>
    );
}

export default CondinionallyRender;

选项 2：逻辑短路求值。感觉有点像魔术，你需要知道逻辑表达式是如何求值的。

import React from 'react';

function CondinionallyRender() {
    const [show, setShow] = React.useState(true);

    return (
        <>
            <input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
            {show && <p>👋👋👋👋👋</p>}
            {show || <p>💨</p>}
        </>
    );
}

export default CondinionallyRender;

选项 3：if-else 函数。最易于理解，但 HTML 代码需要与其他 HTML 代码区分开来。

import React from 'react';

function CondinionallyRender() {
    const [show, setShow] = React.useState(true);

    const renderIt = () => {
        if (show) {
            return <p>👋👋👋👋👋</p>
        } else {
            return <p>💨</p>
        }
    }

    return (
        <>
            <input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
            {renderIt()}
        </>
    );
}

export default CondinionallyRender;

Vue

<template>
    <div>
        <input type="checkbox" v-model="show">
        <p v-if="show">👋👋👋👋👋</p>
        <p v-else>💨</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            show: true
        }
    }
}
</script>

列出数组

反应

import React from 'react';

function List() {
    const todos = ['Eat', 'Move', 'Code', '😴😴😴'];

    return (
        <ul>
            {
                todos.map(todo =>
                  <li key={todo}>{todo}</li>
                )
            }
        </ul>
    );
}

export default List;

Vue

<template>
    <ul>
        <li v-for="todo in todos" :key="todo">{{todo}}</li>
    </ul>
</template>

<script>
export default {
    data(){
        return{
            todos: ['Eat', 'Move', 'Code', '😴😴😴']
        }
    }
}
</script>

类名与类

反应

<div className="center-box"></div>

Vue

<div class="center-box"></div>

我不喜欢被排除在普通 HTML 之外。

直接改变状态

反应

//declare state
const [human, setHuman] = React.useState({ name: 'Gaute', age: 28, favouriteDinner: 'Pizza'});
const [counter, setCounter] = React.useState(0);

//update state
setHuman({ ...human, favouriteDinner: 'Candy' });
setCounter(counter + 1)

Vue

//declare state
data(){
  return{
    human: { name: 'Gaute', age: 28, favouriteDinner: 'Pizza'},
    counter: 0
  }
}

//update state
this.human.favouriteDinner = 'Candy';
this.counter++;

这对 Vue 来说是一个明显的胜利，因为我不喜欢使用之前的状态重写整个对象或值的想法。

项目统计数据示例

	生产构建尺寸	项目规模	代码字符
反应	460 KB	146 MB	2345
Vue	443 KB	67.2 MB	1797

结论

对我来说，Vue 的学习曲线要快得多，因为我花了一段时间才理解 React，而 Vue 则让我一眼就上手（可能是因为它与 AngularJS 的指令很相似）。Vue 感觉更接近普通的 HTML 和 JavaScript。我不需要使用 JSX，因为 JavaScript 经常会让 HTML 代码变得杂乱。Vue 还支持单文件组件，所有组件代码（HTML、JavaScript 和 CSS）都可以放在同一个文件中。Vue 还为组件定义了 CSS 的作用域，这一点也非常棒！

示例代码可以在GitHub上找到。

这只是我的一些个人看法。如果你喜欢其他的，也没关系 :)

文章来源：https://dev.to/gautemeekolsen/why-i-prefer-vue-over-react-3jm6