为什么我喜欢Vue胜过React?

原文:Why I prefer Vue over React – Gaute Meek Olsen – Medium

翻译:码中人

这篇文章主要集中在API、工具层次的讨论,没有涉及到Vue与React的核心差异。

当今有很多很棒的Web开发框架,我相信每个框架都可以用来创建您想要的网站。你的选择的仅取决于个人喜好,您甚至可以不使用任何框架。

我本人通常选择Vue。而不是React,主要是以下几个原因:

不使用构建工具情况下

Vue和React都允许使用原始的JavaScript,HTML和CSS来完成网站建设。

以下让我们创建一个按钮,该按钮会记录被点击的次数。

React

<!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>

以上优缺点比较:

React:

  • 文件大小: 40.7 KB
  • 字符: 740 个
  • 缺点: 没有JSX模板的支持,代码凌乱

Vue:

  • 文件大小: 32.6 KB
  • 字符: 389个
  • 缺点: 子组件需要用到HTML字符串做template,无法像HTML标签显示的声明在网而上。子组件多了代码就会乱。

这个场景下,我更喜欢Vue。因为它很容易向网站添加特性。代码也跟构建工具下的几乎一样。


构建工具CLI

React通过“Create React App” 构建项目. 但如果你要增加其它功能特性,如router,Sass,linter等,你要在构建项目之后手动添加。

Vue-cli在构建项目时,就允许你选择相应的附加功能,这就比react-cli贴心。


HTML模板

两个框架一个很大的区别就是如何创建HTML。

react使用JSX渲染函数,允许你把JavaScript和HTML写在一块。对我来说,写着写着就变成意大利面条式代码。

Vue,允许您编写普通的HTML,在HTML标签上添加功能的指令(Vue中也可以使用JSX)。

看看例子。

绑定input的值

react

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>

条件渲染

react

方案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调整。

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>

列表展示

react

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>

ClassName vs Class

react

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

vue

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

我更倾向于写正常的HTML。


切换状态

react

//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赢了。


以上示例代码分析

React:

  • 打包后文件大小: 460 KB
  • 项目文件大小: 146 MB
  • 字符: 2345个

Vue:

  • 打包后文件大小: 443 KB
  • 项目文件大小: 67.2 MB
  • 字符: 1797个

总结

就个人而言,Vue学习曲线更舒缓快速,而react非常难学。因为Vue的写法很接近原生的HTML和js。我不使用JSX,JSX总让我觉得代码很杂乱。Vue也有单个的文件组件模板,同个组件的html、js、css都在同一个文件,Vue还有组件范围的css,也非常好用。

以上示例代码见:gautemo/frontend-framework-compare: Example code where I compare the difference between Vue and React

码中人 微信公众号

关注微信公众号

码中人 微信公众号