【JavaScript 框架】Vue与React：如何选择2024

前端web开发空间充满了多种JavaScript框架可供使用。然而，我想到了两个顶级竞争者：Vue和React。这两个框架都是构建现代网络应用程序的高效而灵活的解决方案，并得到了广泛采用，甚至包括Adobe、Airbnb、阿里巴巴、Figma和Netflix等主要品牌。

虽然Vue和React有着相同的目的，但在决定使用哪一个时，我们必须注意它们的差异。选择正确的框架至关重要，因为我们的选择会极大地影响开发过程和应用程序的整体成功。

在本文中，我们将比较Vue和React，看看它们是如何相互比较的。我们将研究它们的相似性、差异性、优点和缺点，以及在决定它们时需要考虑的因素。

在本文的最后，您将能够做出明智的决定。在这一过程中，我们还将通过使用这两个框架构建一个基本项目来弄脏我们的手。让我们一起潜水吧！

Vue是什么？

Vue，发音为“view”或Vue.js，是一个用于构建网站和应用程序的开源渐进式JavaScript框架。它由前谷歌工程师Evan You开发，他于2014年2月正式推出了该框架。一些使用Vue的流行品牌包括Adobe、Gitlab和苹果。

Vue的设计是轻量级的，易于理解，是初学者和有经验的开发人员的绝佳选择。它专注于应用程序的视图层，使开发人员能够轻松地创建交互式和动态的web界面。

多年来，Vue因其简单、灵活和性能而广受欢迎。它很容易学习，因为它有一个简单的模板语法，非常符合HTML、CSS和JavaScript的基本原理。另一个以易于理解的语法而广为人知的框架是Svelte。

优点

• Vue的学习曲线平缓，对初学者很友好。
• Vue有一个紧凑而轻量级的核心库，当使用gzip时，其大小为34.7kb。
• Vue可以很容易地集成到现有项目中，并支持逐步采用。我们不需要对Vue进行全面重写。

Cons

• Vue的生态系统比其对应的React小，这意味着社区生成的库和工具更少。
• 没有对移动支持的本机支持。
• 虽然它是一个坚实的框架，但对Vue开发人员的需求低于对React的需求。

什么是React？

 

React是一个开源JavaScript库，用于构建web应用程序的用户界面。它由Facebook（现在称为Meta）开发，最初在内部发布，直到2013年5月28日向公众发布。观看此视频，了解有关React历史的更多信息。一些使用React的流行品牌包括Netflix、Facebook（显然）和优步。

React的一个关键特性是虚拟DOM（文档对象模型），它是实际DOM元素及其属性的轻量级副本。React使用了一种困难的算法，将虚拟DOM与实际DOM进行比较，并只更新已更改的部分。这使得React非常快速高效，尤其是在处理大型复杂应用程序时。

优点

• React通过其移动开发框架React Native支持iOS和Android开发。
• React拥有一个庞大的生态系统，其中充满了更广泛的开源第三方库和工具。
• React得到了积极维护，并经常更新。一个例子是2022年3月发布的React 18，其中包括服务器组件和新的startTransition API等功能。

Cons

• React的学习曲线更陡，尤其是对初学者来说。
• 生态系统中充满了几种用于状态管理、路由、UI、动画等的第三方解决方案，这可能是一个缺点，并导致决策瘫痪，尤其是在开发人员有不同偏好的团队中。

Vue和React之间的主要相似之处

基于组件的体系结构

Vue和React的主要相似之处之一是它们基于组件的体系结构。这两个框架都允许我们将UI接口分解为可重用和自包含的组件。这使我们能够通过组合和重用这些组件来创建复杂的前端层，同时我们的代码保持模块化和可维护性。

虚拟DOM

React引入了虚拟DOM。但是，这两种工具都使用它来高效地更新和渲染UI组件。不直接操作实际DOM，而是首先对虚拟DOM进行更改，然后仅在必要时应用于实际DOM。这将提高性能，并使渲染过程更加高效。

元框架

Vue和React都有基于它们的元框架。使用Vue，我们有Nuxt.js和静态站点生成器，如Gridsome和VuePress。使用React，我们有Next.js、Gatbsy和Remix等。

灵活性和可扩展性

Vue和React是高度灵活和可扩展的框架。它们可以集成到现有项目中，也可以用于从头开始构建新项目。它们可以用于创建简单的单页应用程序或复杂的企业级应用程序。

Vue和React之间的主要区别

受欢迎程度和采用率

根据Stack Overflow的2023年开发者调查，React比Vue更受欢迎。根据他的统计，29137名开发者使用React，11761名开发者使用Vue。自2022年的Stack Overflow调查以来，这些百分比一直保持相对不变，该调查显示42.62%的开发者使用React，18.82%的开发者使用Vue。

语法：JSX vs templates

Vue和React之间最显著的区别之一是它们提供的语法不同。Vue提供了一种模板语法，这是一种基于HTML的语法，在表示层（HTML）和逻辑层（JavaScript）之间提供了清晰的分隔。

它支持数据绑定、属性绑定、正则JavaScript表达式和称为指令的基于Vue的特殊属性。模板语法深受Angular的启发。我喜欢Vue的一点是它的语法很容易一次掌握。

以下是Vue的数字增量按钮语法示例代码：

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <button v-on:click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

另一方面，React提供了JSX，它代表JavaScriptXML。它允许我们直接在JavaScript文件中编写类似HTML的代码。我们编写的任何JSX代码在浏览器中执行之前都会被转换为常规JavaScript。

这些年来，我已经习惯了JSX。然而，作为一个React初学者，这有点难以理解。一些开发人员最初不喜欢JSX，因为它违背了传统的关注点分离模式，即分离HTML、CSS和JavaScript。

这里是React的JSX语法中的相同增量按钮。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count++)}>Count is: {count}</button>
      <style>
        {`
          button {
            font-weight: bold;
          }
        `}
      </style>
    </div>
  );
}

学习曲线

React的学习曲线比Vue更陡。这主要是因为它们的模板语法不同。React的JSX语法JavaScript和HTML，这使得它很难掌握，尤其是对初学者来说。另一方面，Vue基于模板的语法与传统HTML更相似，使初学者更容易理解。

移动开发支持

React支持使用React Native开发移动应用程序。除了移动开发，React Native还为构建Windows和macOS应用程序提供支持。它于2015年发布，被Instagram、Pinterest和Uber Eats等品牌使用。

Vue曾经推出过名为Vue Native的移动开发产品。然而，它早已被弃用。虽然Vue团队没有正式的解决方案，但我们可以使用NativeScript作为基于Vue的移动开发的替代方案。

内置过渡组件

就像Angular一样，Vue提供了内置的转换组件，<transition>和<TransitionGroup>，我们可以使用它们来提升用户体验。我们可以使用这些组件来创建不同类型的效果，如进入和离开动画、基于CSS的转换和可重复使用的转换。另一方面，React不提供原生动画或过渡功能。但是，我们可以使用动画库，如Framer Motion或React Transition Group。

 

在Vue和React之间进行选择时需要考虑的因素

让我们探讨一下在Vue和React之间进行选择时需要考虑的一些因素。

学习曲线

首先要考虑的因素之一是与每个框架相关的学习曲线。与Vue相比，React的学习曲线更陡峭，尤其是对于刚接触JavaScript框架的开发人员来说。另一方面，Vue的学习曲线平缓，被认为对初学者更友好。根据项目时间表，我们可能希望选择我们可以掌握并更快开始使用的工具。

社区支持和生态系统

一个框架的社区规模可以极大地影响其增长和支持。React拥有比Vue更大的社区和更完善的生态系统。以GitHub的恒星为衡量标准：React目前有21.6万颗恒星，而Vue有40.6万颗恒星。React生态系统如此之大，以至于Next.js的恒星数量超过了Vue，准确地说是113k颗。不过，Vue不应该被排除在游戏之外，因为它已经迅速流行起来，而且它的社区也在不断增长。

就业市场和行业需求

除非你把学习JavaScript框架作为一种爱好或个人项目，否则你很可能打算用它来找工作和赚钱。在这种情况下，考虑一下就业市场上需求量很大的工具是安全的。确定这一点的一种方法是检查10到20个前端开发人员或软件工程师的工作申请，看看这些角色最需要哪种工具。

轻松访问第三方解决方案

除了我们计划从头开始构建每一个功能之外，轻松访问第三方解决方案，如预构建的UI组件、造型解决方案、身份验证系统、动画库、图像优化库等，都很重要。这是React大放异彩的一个领域，因为社区已经提供并不断提供适合不同需求的图书馆。然而，Vue也有一些很棒的包值得一看。

跨平台要求

如果唯一考虑的平台是网络，那么我们选择使用的框架就无关紧要了。然而，假设我们计划构建iOS和Android应用程序。在这种情况下，最好将该解决方案与微软、Skype、Shopify和Pinterest等顶级品牌积极使用的经过战斗测试并得到良好支持的移动（iOS和Android）开发框架一起使用。

 

Vue入门

按照以下步骤启动一个新的Vue应用程序。

步骤1：安装create-vue脚手架工具

运行下面的命令来创建一个新的Vue项目。该命令将安装并触发create vue，一个Vite供电的脚手架工具。它提供了提示，我们可以根据自己的偏好配置Vue应用程序。

 

npm create vue@latest

这是配置选项的屏幕截图。

步骤2：安装依赖项并启动开发服务器

连续运行以下命令以完成安装过程。第一个命令导航到项目的目录中，第二个命令安装Vue所需的第三方依赖项，最后一个命令启动dev服务器。

cd <name-of-project>
npm install
npm run dev

Vue应用程序的默认端口为http://localhost:5173/.在浏览器上导航到该URL，我们将看到下面的网页。浏览Vue的文档，了解更多入门信息。

学习Vue的推荐课程

了解更多Vue的免费和付费资源包括：

• A roadmap for learning Vue
• Vue 3 Fundamentals with Vue School
• Fullstack Vue 3 by Newline
• Intro to Vue 3 by Vue Mastery
• Vue 3 Tutorial for Beginners by Codevolution

有用的Vue库

虽然Vue的生态系统没有React那么多开源解决方案，但它确实有一些很棒的库和工具供我们使用。一些选项包括：

• Vuetify
• Vue Router
• FormKit
• Gridsome
• Vuex

使用Vue构建一个简单的Todo应用程序

在本节中，我们将构建一个简单的基于Vue的todo应用程序。下图显示了应用程序及其不同组件。

todo应用程序包括：

• 包含不同待办事项的TodoList组件
• AddTodo组件，包含输入字段和提交按钮
• 呈现UI并处理状态和功能的主页

我们将按照以下步骤构建应用程序。

步骤1：创建用户界面

请注意，我们使用的是纯CSS接口。为了简单起见，以下代码块不包括样式，但如果您想如上图所示对项目进行样式设置，请随意使用此沙盒中的样式。

首先，让我们在components目录中创建两个文件。

首先，TodoList组件。现在，我们将对todo项进行硬编码。但是，我们将对此进行更改，并以编程方式填充它们。

<!-- ./src/components/TodoList.vue -->
<template>
  <ul>
    <li>Read some awesome articles on Prismic blog</li>
    <li>Watch One Piece</li>
  </ul>
</template>

然后是AddTodo组件。

<!-- ./src/components/AddTodo.vue -->
<template>
  <div>
    <input type="text" placeholder="Add todo item" />
    <button>Add Todo</button>
  </div>
</template>

最后，我们注册这些组件，并将它们放在主页中，也就是App.vue文件中。

<!-- ./src/App.vue -->
<script>
import AddTodo from "./components/AddTodo.vue";
import TodoList from "./components/TodoList.vue";

export default {
	components: {
    AddTodo,
    TodoList,
  },
  setup() {
    return {
      AddTodo,
      TodoList
    };
  }
};
</script>

<template>
  <div id="app">
    <h1>Todos</h1>
    <AddTodo />
    <TodoList />
  </div>
</template>

步骤2：创建todo状态和状态更新功能

为了实现这一点，我们需要更新App.vue文件。

<script>
import AddTodo from "./components/AddTodo.vue";
import TodoList from "./components/TodoList.vue";

export default {
  data() {
    return {
      todos: [
        { id: 1, item: "Read some awesome articles on Prismic blog" },
        { id: 2, item: "Watch One Piece" },
      ],
    };
  },
  methods: {
    addTodo(item) {
      let newTodo = {
        id: performance.now(),
        item,
      };
      this.todos.push(newTodo);
    },
  },
};
</script>

<template>
  <AddTodo @add-todo="addTodo" />
  <TodoList :todos="todos" />
</template>

在这里，我们做了以下操作：

• 创建了一个todos状态，并用一些任务填充它。
• 创建了一个addTodo方法，该方法获取用户提交的todo并将其添加到todo状态。
• 将addTodo方法和todos状态分别传递给addTodo和TodoList组件。

步骤3：跟踪用户输入并处理表单提交

为了实现这一点，我们需要更新AddTodo.vue文件中的代码。

<script>
export default {
  name: "AddTodo",
  data() {
    return {
      todoInput: "",
    };
  },
  methods: {
    handleClick(val) {
      if (!val) return;
      this.$emit("add-todo", val);
      this.todoInput = "";
    },
  },
};
</script>

<template>
  <div class="form-container">
    <input v-model="todoInput" type="text" />
    <button @click="handleClick(todoInput)">Add Todo</button>
  </div>
</template>

在这里，我们做了以下操作：

• 创建了一个todoInput，它将保存输入字段的状态，并通过v模型数据绑定将其与输入同步。
• 创建了一个handleClick函数，该函数在用户提交输入时捕获输入中的文本，并将其发送到其父组件，后者随后更新todos状态。
• 将handleClick函数传递给按钮的单击事件处理程序。

步骤4：显示状态中的todo

最后，我们需要显示处于todo状态的todo项，而不是在TodoList.vue组件中对它们进行硬编码。

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.item }}
    </li>
  </ul>
</template>

<script>
export default {
  name: "TodoList",
  props: {
    todos: {
      default: () => [],
    },
  },
};
</script>

有了这些，我们已经成功地用Vue构建了todo应用程序。这是todo应用程序的最基本版本。我们可以通过添加更多功能来改进，如本地存储、数据库集成、基于角色的权限、编辑和删除任务等。

React入门

React团队建议使用React驱动的框架，如Gatsby、Next.js和Remix来构建应用程序。在本文中，我们将使用Next.js。

按照以下步骤启动一个新的React应用程序。

步骤1:使用Create Next应用程序创建一个新的Next.js应用程序

就像create-vue一样，create-next应用程序CLI工具可以帮助创建和配置新的next.js应用程序。运行以下命令以创建新项目。

npx create-next-app@latest

如果您按照本教程的步骤进行操作，则可以选择以下配置选项：

步骤2：安装依赖项并启动开发服务器

与Vue一样，第一个命令导航到项目的目录中。我们使用create-next应用程序来创建我们的项目，它为我们处理依赖关系，所以我们所需要做的就是用下面的第二个命令启动开发服务器。

cd <name-of-project>
npm run dev

Next.js应用程序的默认端口是http://localhost:3000.在浏览器上导航到该URL，我们将看到下面的网页。浏览React的文档，了解更多入门信息。

学习React的推荐课程

一些很棒的免费和付费课程可以了解更多关于React的信息，包括：

• A roadmap for learning React
• React: the Complete Guide by Maximilian Schwarzmüller
• The Ultimate Next.js 13 Crash Course for Beginners - Build 6 Apps in 18 Hours
• Epic React by Kent C. Dodds
• Full Modern React Tutorial by Net Ninja
• Fullstack React by Newline

有用的React库

React的生态系统充满了我们可以利用的几个伟大的开源解决方案。一些很棒的库和工具包括：

• Material UI
• React Router
• React Hook Form
• TanStack React Query
• Zustand

使用React构建一个简单的Todo应用程序

让我们在Next.js中创建与我们之前创建的todo应用程序相同的todo。您可以查看此沙箱以获取代码，也可以使用以下步骤进行操作。

就像Vue应用程序一样，Next.js版本的UI由相同的组件组成，TodoList、AddTodo和将所有内容放在一起的主页。

步骤1：安装Chakra UI and uuid

React应用程序的用户界面与Vue版本相同，因此我们不讨论细节。唯一的区别是我们将在这里使用查克拉UI。

因此，首先，让我们在终端的一个单独选项卡中运行以下命令来安装Chakra UI（如果您不使用npm，可以按照此处的其他安装说明进行操作）：

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

我们还将使用uuid为每个todo项目提供一个唯一的ID。因此，在终端的新选项卡中，运行以下命令，这样在添加代码时就不会出现错误。

npm install uuid

步骤2：更新布局

如果您还没有，请在代码编辑器中打开您的项目。

现在，让我们更新layout.js文件，通过添加以下代码导入Chakra组件：

// ./src/app/layout.js
import './globals.css'
import { ChakraProvider } from "@chakra-ui/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ChakraProvider>
          {children}
        </ChakraProvider>
      </body>
    </html>

步骤3：创建待办事项状态

状态将存在于主页组件中，该组件位于/src/app/page.js文件中。使用以下代码进行更新。

// ./src/app/page.js

"use client";

import { useState } from "react";
import { Heading, VStack } from "@chakra-ui/react";
import AddTodo from "@/components/AddTodo.js";
import TodoList from "@/components/TodoList.js";

export default function Home() {
  const [todos, setTodos] = useState([
    { id: "1", item: "Read some awesome articles on Prismic's blog" },
    { id: "2", item: "Watch One Piece" },
  ]);

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

  return (
    <VStack p={4} mt="28">
      <Heading size="2xl">Todos</Heading>
      <AddTodo addTodo={addTodo} />
      <TodoList todos={todos} />
    </VStack>
  );
}

让我们分解上面的代码。

• 我们从React导入了useState，这是React的构建中状态管理挂钩。
• 之后，我们使用钩子创建一个todo状态，并用一些默认的todo项填充它。
• 接下来，我们创建了一个addTodo函数，负责添加todo项。该函数将todo对象作为参数，并使用setTodos函数将其添加到todos状态。
• 最后，我们通过props将addTodo和todo传递给它们各自的组件。道具是React组件之间传递数据的主要方式。

在这个阶段，如果你转到网站的前端，你会注意到一个错误。这是因为我们正在尝试导入尚不存在的组件，所以接下来让我们创建这些组件！👇

步骤4：跟踪用户输入并更新状态

在/src中，创建一个/components目录，并在其中添加我们的AddTodo.js文件。将以下代码添加到AddTodo.js文件中。

// ./src/components/AddTodo.js
import { useRef } from "react";
import { Button, HStack, Input } from "@chakra-ui/react";
import { v4 as uuidv4 } from 'uuid';

export default function AddTodo({ addTodo }) {
  const todoRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!todoRef.current.value.trim());
    const todo = {
      id: uuidv4(),
      item: todoRef.current.value,
    };

    addTodo(todo);
    todoRef.current.value = "";
  };

  return (
    <form onSubmit={handleSubmit}>
      <HStack m="8">
        <Input
          variant="filled"
          border="gray.600"
          placeholder="Add todo item"
          ref={todoRef}
        />
        <Button type="submit" colorScheme="green" px="8">
          Add Todo
        </Button>
      </HStack>
    </form>
  );
}

在这里，我们：

• 从React导入useRef钩子，并使用它来获取输入字段的引用并跟踪其值。它可以帮助我们知道用户是否在输入上键入了内容。
• 我们创建了一个handleSubmit函数，该函数使用步骤2中传递的addTodo函数向todos状态添加了一个新的todo对象。handleSubmit还确认输入字段不是空的，在将其添加到状态之前先使用todoRef。这是因为我们希望确保只有当有人填写表格时才能添加待办事项。

步骤5：显示todos状态中的todos

现在，在/components目录中添加一个TodoList.js文件，并将以下代码添加到该文件中。

// ./src/components/TodoList.js
import { HStack, Text, VStack } from "@chakra-ui/react";

export default function TodoList({ todos }) {
  return (
    <VStack
      w="100%"
      alignItems="stretch"
      maxW={{ base: "90vw", sm: "80vw", lg: "50vw", xl: "40vw" }}
    >
      {todos.map((todo) => (
        <HStack key={todo.id} bg="gray.700" borderRadius="lg" p="4">
          <Text color="white">{todo.item}</Text>
        </HStack>
      ))}
    </VStack>
  );
}

在这里，我们通过todos道具访问状态，通过数组进行映射，并显示状态中的todos。有了这个设置，每当一个新的todo对象被添加到状态中时，它就会被更新，并且新的todoitem就会显示在UI中。

有了这些，我们已经成功地用React构建了todo应用程序。

结论

Vue和React是用于构建现代web应用程序的强大JavaScript框架。它们都有各自的优点和缺点。在进行选择时，重要的是要考虑跨平台支持、学习曲线、个人偏好、项目要求、生态系统和就业市场等因素。

无论您的选择如何，学习Vue或React都必将提高您的技能，并在不断发展的网络开发领域开辟新的机会。此外，无论我们选择哪一种，重要的是要注意它们的惯例和最佳实践，以充分利用它们并从中获得最佳效果。

常见问题

我应该使用React还是Vue？

React和Vue是构建网站和应用程序的优秀前端框架，它们都有各自的优势和局限性。没有一个一刀切的答案。然而，在决定使用哪个框架时，项目需求、个人偏好和开发者生态系统等因素值得考虑。

Vue比React好得多吗？

不，Vue并不比React好。然而，它与React不同，有自己的优势、劣势和独特之处。例如，Vue的简单语法使初学者比React更容易学习。然而，React比Vue更受欢迎，并且有一个更成熟的生态系统，提供了广泛的库、工具和扩展，以增强开发过程。

我应该在2023年学习React还是Vue？

在学习框架时，必须考虑当前就业市场、行业趋势和个人学习目标等因素。此外，一旦你学习了一个框架，就更容易学习其他框架，这意味着你可以随着时间的推移学习多个框架。例如，我从React开始，但后来，我还学习了Vue、Angular和Svelte。