原文：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，也非常好用。
