Vue low 变成 React？（老实说我很困惑）-js教程-PHP中文网

Vue low 变成 React？（老实说我很困惑）

心靈之曲

发布： 2025-01-13 20:43:43

原创

1030人浏览过

vue 向 react 演变？(老实说，我有点迷茫) (替换为原文图片)

我一直是 Vue 的忠实拥趸。初次使用 Vue 时，它的简洁性如同一道清风，尤其与我之前苦苦挣扎的 React 项目相比。Vue 2 似乎秉持着明确的理念：易于上手、简洁明了，让开发者专注于应用本身，而非框架本身。

然而最近，我更多地使用 Vue 3，说实话，我有点困惑。我开始看到一些非常熟悉的模式，但却感觉不太对劲。仿佛 Vue 3 正在……逐渐演变成 React 的样子。

我不是想批评 Vue 3。它有很多很棒的功能，组合式 API 也非常强大。但我无法摆脱这种感觉：我们正在失去一些最初让 Vue 独树一帜的核心原则。

“Vue 式”开发：我们所钟爱的

立即学习“前端免费学习笔记（深入）”；

让我们面对现实吧。Vue（尤其是 Vue 2）的一大魅力在于它的易用性。你拥有简洁明了的 Options API。使用模板是一种享受；简单直观。你可以快速启动 Vue 应用，无需费力进行复杂的配置。生态系统易于管理；你有一个可靠的路由器（vue-router）和一个状态管理方案（Vuex），仅此而已！使用 Vue 可以非常高效。

这是一个 Vue 2 组件的简单示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">reverse</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello vue 2!",
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split("").reverse().join("");
    },
  },
};
</script>

登录后复制

简洁。直接。易于理解。这就是 Vue 的承诺。

转变：当事情开始感觉……不一样时

但随着 Vue 3 的出现，情况开始变化。组合式 API 的引入虽然功能强大，但却带来了一种完全不同的思维模式。感觉……很抽象。突然之间，简单的任务现在需要更多代码。你可以在这两个 API 中执行相同的操作，但在某些情况下，这种复杂性似乎没有必要。

这是 Vue 3 中使用组合式 API 的相同组件示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse</button>
  </div>
</template>

<script>
import { ref } from 'vue';

const message = ref("Hello Vue 3!");

function reverseMessage() {
  message.value = message.value.split("").reverse().join("");
}

export default {
  setup() {
    return { message, reverseMessage };
  }
};
</script>

登录后复制

它实现了同样的功能，但是……是不是感觉需要更多工作？即使是一个简单的消息变量现在也需要一个 ref，并需要使用 .value 来访问其内容！对于以前很简单的事情来说，这有点过头了。

而且这不仅仅是组合式 API。状态管理领域也变得更加复杂。我们现在有了 Pinia，它很棒，但现在我们又多了一个选择。它开始感觉像 React 那样的复杂性，没有单一的正确方式，开发者必须在编码前做出许多决定。

我还看到一些 Vue 3 项目，感觉它们已经完全偏离了正轨，对于可能只需要基本功能的项目来说，使用了复杂的设置和抽象层。这就像 React 的方式，你会看到一个由 10 个库组成的 Hello World 应用。

不断发展的生态系统和选择

我不禁注意到 Vue 生态系统的增长。新的工具和库层出不穷，这既令人兴奋又令人不知所措。

这让我想起了很多 React 开发者都有的一种感觉：“选择困难症”。我开始通过 Vue 3 感受到这一点：