Vue相比React好在哪？
Vue与React对比，这是一个React老用户初次使用Vue的感受，觉得Vue有比React要好的地方，当然仅仅是一些细小的好处而已。简单整理如下：
1、不同设计哲学。
React是一个类库，而Vue是渐进式框架。虽然都是构建UI界面的工具，框架相比会提供更多的东西，约束、文档、工具等，类库则专注于提供关注的能力。
2、单一文件组件。
Vue单一组件包含HTML,CSS,JS，React的CSS分离，需要引入类似emotion或 Styled Components的专门库。
<template>
<p>{{ greeting }} World!</p>
</template>
<script>
module.exports = {
data() {
return {
greeting: 'Hello',
};
},
};
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
import React, { useState } from 'react';
function Button() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Current count: {count}
<br />
Click me
</button>
);
}
3、官方支持的类库。
Vue官方默认有Router和Vuex，而React官方并未提供类似库，需要单独安装React-Router与redux。
4、Vue有官方的编码风格推荐，这个不错。
5、class与样式绑定。
Vue内置了对于class的支持，有:class=语法。
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
data() {
return {
isActive: true,
hasError: false
}
}
6、slot插槽。
Vue借鉴了Web Component规范，实现了slot，用来做占位替换。React中一切都是prop属性，如果要渲染多个子组件则需要设置多个属性。
function Nav({ left, right }) {
return (
<nav>
<div className="left">{left}</div>
<div className="right">{right}</div>
</nav>
);
}
function App() {
return (
<main>
<Nav left={<Logo />} right={<UserDropdown />} />
</main>
);
}
7、指令修饰符。
Vue有使用 v-前缀的默认指令，从而实现一些诸如on,if,for或表达之类的操作。React实现类似指令则需要单独添加函数和组件。
<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>
<!-- shorthand -->
<a @click="doSomething"> ... </a>
<form onSubmit.prevent={onSubmit} />
React.createElement(form, { onSubmit: preventWrapper(onSubmit) });
<!-- only call `submit()` when the `key` is `Enter` -->
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />
8、表单数据模型绑定。
当将数据绑定到表单时，v-model指令可以实现数据与视图的联动，而React使用原生或setState的方式来写。
// Input
////////
// React
<input type="input" value={message} onChange={onChange} />
// Vue.js
<input type="input" v-model="message" />
// Checkboxes and Radiobuttons
////////
// React
<input type="checkbox" checked={message != null} onChange={onChange} />
// Vue.js
<input type="checkbox" v-model="message" />
// Select
////////
// React
<select value={message} onChange={onChange}>
<option>A</option>
</select>
// Vue.js
<select v-model="message">
<option>A</option>
</select>
9、自定义指令。
Vue支持directive来自定义指令，而React则需要自定义组件。
const app = Vue.createApp({})
// Register a global custom directive called `v-focus`
app.directive('focus', {
// When the bound element is mounted into the DOM...
mounted(el) {
// Focus the element
el.focus()
}
})
<input v-focus />
10、TS支持。
Vue新版3.0已经采用了TypeScript来写，这意味着对于TS支持的更好。
最后，我并非说React不好，我并不认为他们有太大区别，以上这些都是Vue一些细微的优点而已。
总结与思考
有必要从React切换到Vue技术栈吗？答案是没有必要。我还是喜欢React仅是"library-ness"的概念，我已经熟悉React编程了。但我们可以从Vue中获得一点借鉴，尤其是官方提供的代码样式规则。希望本文对于不了解Vue的人来说是一扇窗户，可以开阔眼界。我惊讶地发现我居然喜欢了Vue的工作方式：）
