当我走进现代前端开发行业的时候，我做了一个每位开发人员都要做的决策：选择正确的框架。那时jQuery正在被淘汰，人们不再用它编写难看的、非结构化的老式JavaScript程序了。我们正在走进一个时髦的，流行的，模块化的JavaScript框架的新时代。所以我选择了VueJS。

本文最初发布于Medium网站，经原作者授权由InfoQ中文站翻译并分享。

下面就是我热爱（现在还是爱着）VueJs的原因所在。

它将 HTML/CSS/JS 结构结合到了一起

目前来看，这是VueJS最吸引人的优势。

Vue文件对初学者非常有吸引力。它易于理解，而且我们很容易将整个HTML模板分解为许多Vue文件。我一眼就能看出来结构（模板）、行为（脚本）和外观（样式）。

<template>
<div id="myComponent">
  <Counter />
  <span v-if="reading">Hello reader !</span>
</div>
</template>
<script>
import Counter from "@/components/Counter";
export default {
  name: "myComponent",
  components: {
    Counter
  }
}
</script>
<style>
#myDiv {
  display: block;
}
</style>

Vuex

我开始了解状态管理系统时是从Redux入门的。它很难学，而且似乎过于复杂。但有了Vuex，体验就太棒了。

Redux需要action、reducer和store，而Vuex只有action、mutation和store。相比mutation，reducer的逻辑实在很难理解，因为我学习后者时相关的优秀学习资源很少见。在我看来，Vuex对于新手来说更容易上手。

NuxtJS

老实说，受React NextJS启发的NuxtJS是我在Vue项目中的默认框架。我喜欢Nuxt项目的约定优于配置的架构。

页面位于page目录下。组件位于component目录。存储在store目录中。中间件则在middleware目录里，依此类推。

所有注入都是透明的。所有配置都在nuxt.config.js里。太棒了！它使你可以轻松构建启用SSR的网站和SPA。

然而，我又试了一下React

在学习Vue之前我也尝试过React，但后者初看上去太难学了。随着时间推移，我更深入了解了状态管理机制和ES6语言规范，于是我对React的看法也有了变化。

我看到有很多文章在推荐React，甚至我周围的人都在谈论React，所以我尝试了一下。结果很不错，于是我开始在项目中使用这个框架。下面是我眼中React一些最明显的优势。

对ES6和TypeScript友好

开发人员掌控类、接口和枚举。所以我很容易就能理解React组件的工作机制，并知道该如何将其集成到应用程序中。

你也可以在Vue中使用ES6语法，但是React比Vue设计得更好。看一下如何在React中注册组件：

class MyComponent extends React.Component {
  render() {
    return(<div />)
  }
}

对于VueJS，你将一个对象传递给Vue Component函数：

Vue.component({
  template: `<div></div>`
})

也就是说，现代React（2020年）不再用到class，而是使用函数式组件（和hooks）。
VueJs现在提供了TypeScript支持。但这种支持不像React那样自然，后者只需一条命令就能使用CRA（Create React App）获得TS支持。

在Vue这边，我们仍然需要一些带有自定义装饰器和特性的第三方包来创建一个真正完善的TypeScript应用程序，并且它的官方文档并未包含入门所需的所有信息。

JSX

JSX并非恶魔。有两个流派：亲JSX和反JSX。我不想卷进他们的战争。JSX可以是天使也可以是恶魔，具体取决于你要如何使用模板。

从我的角度来看，对于开发人员来说，编写像下面这样的JSX更加合乎逻辑：

return (
  <div>
    {students.map(student => <p>{student}</p>)}
  </div>
)

比Vue的方式更像HTML：

<div>
  <p v-for="student in students">{{ student }}</p>
</div>

萝卜青菜各有所爱；我是觉得JSX更强大，更灵活。

省事的Hooks

我开始学习使用React组件做开发。问题在于，要创建单个组件作为一个React组件类是很费事的。

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }
  render() {
    return(<div/>)
  }
}

函数式组件让你可以使用带有hooks的局部状态。它移除了很多样板和无用的构造器。

function MyComponent() {
  const [counter, setCounter] = useState(0)
	
  return(<div />)
}

React Hooks简化了状态和其他React部件（如useEffect）的应用，现在我们用不着componentDidMount和componentDidUpdate了。
一些开发人员喜欢OOP方法，所以继续使用class；而其他开发人员则偏爱函数式方法。你可以在项目中同时使用两者！

社区

伟大的项目背后都有很多伟大的头脑。

根据我的经验，React的文档、第三方工具和模块要比Vue多得多。有时，我会为很多Nuxt问题而挣扎许久，搜索解决方案的过程中还会发现很多Next（React）主题。

看看Github仓库，数字可以说明一切。

或它们各自的框架：

如果社区能更快地修复错误，那么你的代码也就会更可靠。和你遇到相同问题的人越多，你解决问题的速度也会越快。

Vue 3即将到来……

Vue 3 中有很多重大更改，其中之一是 Composition API，有了它你就可以无需 Vuex 来管理状态；还有很多很棒的特性即将到来！

四月份，尤雨溪曾在直播中表示，目前的 Vue 3.0 已经可以投入使用，但是要求开发者自己对稳定性负责。他建议生产项目暂时不要上，新的、小的项目可以试水。

《尤雨溪B站直播，Vue 3.0 Beta是一个值得体验的全新版本》

那么，我喜欢 VueJS 吗？是的。我喜欢 React 吗？喜欢。React 比 Vue 更好吗？那就见仁见智了。

原文链接：

https://medium.com/better-programming/why-did-i-quit-vue-for-react-65315285fd90

创作场景

为什么我不再用 Vue，改用 React？