Vue.js 与 React —— 不同寻常的比较

从我开始学习 React 的那一刻起，我就完全爱上了它。

我只需要 JavaScript 就能创建漂亮的 UI 吗？突然之间，我拥有了 HTML 和 CSS 中 JavaScript 的强大功能？

我太喜欢了，太棒了。

我使用 Vue.js 已经很多年了，但还是忍不住关注它的火爆程度。显然，每个使用它的开发者都非常喜欢它！

这怎么可能？我喜欢 React，但有时它也会让我感到沮丧；为什么 Vue.js 的世界里就没那么让我沮丧呢？

几个月前，我开始在一个商业项目中使用 Vue，并完全从 React 转移过来。

当我发现我离开了我心爱的工具时，我有点难过。

但这些框架只是工具；我们不应该根据它们做出严格的职业决定。

这是前端世界——所有工具很快就会消失；新的工具很快就会出现。

现在，在积累了大量前端开发和 Vue.js、React 和 Ember.js 等框架经验之后，让我解释一下为什么我认为 Vue.js 是最好的。

一个非常简单的应用程序

我们今天用 React 和 Vue.js 构建了一个超级简单的应用。它看起来是这样的：

让我们深入研究一下这里的代码。React，你先来。这是一个用 创建的项目create-react-app；我在这里略作了修改App.js。

import { useState } from 'react';

function App() {
  const [isMagicalAnswerVisible, setIsMagicalAnswerVisible] = useState(false)

  return (
    <div className="App">
      <p className="magicalQuestion">
        Which FE framework is the best?
      </p>
      <button className="magicalButton" onClick={() => setIsMagicalAnswerVisible(true)}>
        Find out!
      </button>
      {isMagicalAnswerVisible && <p className="magicalAnswer">
        .....what is life?
      </p>}
    </div>
  );
}

export default App;

我很了解 React，所以这些都能理解。不过，假设我对 React 一无所知——只对 FE 开发和 Web 开发略知一二。

了解了这些之后，我想知道屏幕上会渲染什么。当我查看浏览器时，只看到带样式的 HTML 元素，没有 JavaScript。

而这里——一切都是 JavaScript！我怎么知道屏幕上实际渲染的内容呢？

我发现它function App()返回了一些类似于 HTML 的代码，但它不是 HTML。这是什么？

好的。我假设那个东西会渲染。

这是什么useState？为什么需要立即将其结果赋值给数组？

我不太在意功能。我只想看到和屏幕上一样的东西。为什么先写这些奇怪的东西？

什么是className？为什么我不能直接使用class？

onClick={() => setIsMagicalAnswerVisible(true)}我为什么要这么做？难道我不能直接这么做吗onClick={setIsMagicalAnswerVisible(true)}？哦，现在出现了一些错误。虽然我不知道为什么，但我还是会返回箭头函数。

{isMagicalAnswerVisible && <p className=”magicalAnswer”>…..what is life?</p>}这是什么？花括号里的内容是什么？哦，JS 操作符&&在这里。p如果是 ，会渲染吗true？

想象一下这里有一个巨大的组件。我想看看屏幕上会显示什么。但我做不到，因为我必须滚动前 100 行代码才能找到那个return语句。

我相信这些函数的命名。我相信它们会按照它们说的做。我不想先看实现细节。

让我看看会呈现什么！

Vue.js 提供的功能

这是用 Vue CLI 创建的项目。我App.vue在这里做了一些修改：

<template>
  <p class="magical-question">
    Which FE framework is the best?
  </p>
  <button class="magical-button" @click="findOutMoreAboutThatMagicalFramework">
    Find out!
  </button>
  <p v-if="isMagicalAnswerVisible" class="magical-answer">
    .....what is life?
  </p>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isMagicalAnswerVisible: false
    }
  },
  methods: {
    findOutMoreAboutThatMagicalFramework() {
      this.isMagicalAnswerVisible = true
    }
  }
}
</script>

嗯，我在这里能看到什么？哦，模板！我想我会在屏幕上看到这个模板。

哦，太好了，class就在这儿。这是 HTML 文件吗？

嗯，这里是@click，以及v-if。乍一看有点奇怪，但实际上很有道理。

而且非常简单。

标签<script>在这里。等等，这真的不是 HTML 文件吗？我是不是应该把扩展名从*.vue改成*.html？

不，应该没问题。

这里面有什么export default？

data();这是什么？我得去谷歌一下。哦，这只是组件的状态。

methods? 非常简单。

我清楚地看到了首先渲染的内容。我看到了一些看起来像 HTML 的东西。

但事实并非如此。这是一个非常强大的 Vue.js 应用程序。

Vue.js 看起来……如此熟悉

我想给组​​件添加样式。我需要做什么？
我假设它和 HTML 中一样；我只需<style>在文件底部添加一个标签即可*.vue.js。不行，那样不行。

但它有效！

React 的学习曲线可能非常陡峭，尤其是在处理更复杂的东西时。还记得 Hooks 出现之前的时代吗？当时有那么多的 Render Props、高阶组件，还有一堆其他的东西。

怎么样this.handleClick = this.handleClick.bind(this)？我知道很多 React 开发人员都不知道幕后发生了什么。

另一方面，Vue.js 让一切都变得非常简单。它就像是 HTML 的升级版。

在过去的几个月里，我已经使用 Vue.js 进行了大量工作，并且很少遇到挫折。

我只能关注真正的问题，而不是实际的实施。

我一直在想——这怎么可能？我两周就掌握了核心知识，现在几乎可以构建所有东西了？

React 不是这样。有时候，它真的让人很沮丧。但我仍然喜欢它，因为它完全是 JavaScript 的。

JavaScript 中的一切都令人惊叹，但事实并非如此

Web 由 HTML、CSS 和 JavaScript 组成。

如果我们想要深入理解它，就不能混淆“一切都是 JavaScript”。

通过 Vue.js，我感觉我学到了更多与 Web 相关的一般知识，而不仅仅是与 Vue 相关的知识。

而 React 则恰恰相反。你需要打破对 Web 的深刻理解才能接受这种思维模式。

问题是——Web 会继续存在，而 React 会逐渐衰落。它不是一门编程语言，只是一个库。

Facebook 将会发布一些新的、更好的东西。

你所有的知识都会随着 React 本身而消失。

当然，除了 React 本身之外，你还会学到很多东西——但通过 Vue，你会学到更多。

Vue 的工作原理类似于 Web。它由一堆组件组成，看起来像 HTML，像真实的 Web 一样发出事件。

是的，你不需要将函数作为 props 传递。你可以捕获子组件发出的冒泡事件。

与真实的网络相同。

我是不是太夸张了？

好吧，我知道我有点。

尽管如此，我仍然热爱 React。尽管我不认同纯 JavaScript 的 Web 架构。

但我感觉我可以通过 Vue 更好地学习基础知识。

我可以专注于真正的业务问题，而不是实施问题。

一切都如此简单，却又如此强大。

这也很有趣，因为没有挫败感。

你对此有什么看法？我很想听听你的意见。