【不要被周围所左右！😱】对于初学者来说，Vue比流行的React更适合的原因有以下四点 🐳

1 年 ago
科, 雅
2 minutes

首先

当前有各种不同的前端JavaScript框架，如React、Vue、Angular和jQuery等，但在目前（2023/07/18）React和Vue占据了流行地位。

然而，React的学习成本较高，可能成为初学前端的人灰心的原因（作者也曾在React上遇到过挫折）。因此，在本文中我希望能够在与React进行比较的同时，向初学者解释为什么推荐使用Vue！

1-1. 就比较的对象而言

==== React =====
 React 17.0.1
==== Vue ====
 Vue 3.3.4

這次我們要比較的有以下兩個選項。

    • Reactは人気が上昇した大きな要因である，関数コンポーネント

Vueは 一番書きやすいとされる，Options API

(Composition APIは賛否両論あるので今回は無視します)

2. Vue的四个推荐理由?

写在哪里已经决定了

Vue最吸引人的特点就是能以对象形式进行编写。
以对象形式进行编写意味着，通过查看键（Key）就能理解对应值（Value）的用途。

回应

请查看以下代码。

const App = () => {
//State管理，メソッドなどなんでもここに書ける
  const [num, setNum] = useState(0);
  const onClickButton = () => {
    setNum(num + 1);
  };
//ここでHTML形式を返り値で返す
  return (
    <div className="App">
      <p>{ num }</p>
      <button onClick={ onClickButton }>+1</button>
    </div>
  );
};

唯一必须确定的是将HTML作为返回值返回，其他部分可以基本上在函数内任何地方编写。

虽然对于高级者来说，可以在任何地方写可能会让他们感到高兴，但对于初学者来说，却可能导致混淆不清。

Vue Vue

请看以下代码。

<template>
    <div>{{ num }}</div>
    <button v-on:click="onClickButton">+1</button>
</template>
<script>
export defualt {
    data() {
        return {
            //ここにStateを記述
            num: 0,
        }
    },
    methods: {
        //ここにメソッドを記述
        onClickButton() {
            this.num ++;
        }
    }
}
</script>

框架已经决定了应该在哪里记录什么！比如，在data中记录状态，在methods中记录方法等等，只要知道各自的角色，就不容易混淆了！

2-2. 无需担心重新渲染

在前端开发中，最重要的一点是要意识到重新渲染的时机！也就是说，屏幕刷新的时机非常重要！在这方面，虽然存在一些差异，但Vue的规范使得我们不需要太过关注这个问题！

请做出反应。

在React组件重新渲染的时机主要分为以下三种情况。

    • stateが更新

 

    • propsが更新

 

    親コンポーネントが再レンダリングされたとき

需要注意的是，需要重点关注子组件的重新渲染问题。换句话说，可能会在意料之外的时机发生重新绘制，导致性能变差。因此，为了解决这个问题，需要特别关注记忆化和副作用的调整。

（更新：2023年07月18日）

听说React在最新的18版本中改进了重新绘制的方法。
或许差距有所缩小了呢。

Vue是一种流行的JavaScript前端框架。

Vue重新渲染的时机

    • 監視対象の変数が変更

dataやcomputedなど

propsが更新

虽然一开始看起来一样，但是Vue会只重新绘制受到更改影响的部分，不会重新渲染不需要重新渲染的子组件！这是因为Vue会跟踪组件的依赖关系！你觉得这样不会让人困惑吗？

2-3. 这份文件很易读。

这个东西实话说不是我的喜好，个人而言，React的官方文档感觉有点像直译。
相比之下，Vue的官方文档用的是自然的日语，对于日本人来说更容易阅读。
就算在以下的项目比较中，React也有一些不自然的地方。（感觉有点莫名其妙高压啊）

回应

image.png

Vue框架

image.png

2-4. 写CSS容易

让我们来比较一下，这个有着类似 The Vue 的特点！

反应

在React中，关于使用CSS进行设计的讨论已经进行了多年，目前还没有找到最佳解决方案。
这取决于使用的库等，但默认情况下，可以使用类似普通HTML文件的方式，将CSS文件作为外部文件导入，或者使用对象形式来描述。

#外部ファイルとして記述する方法
.green {
    background-color: green;
}

const App = () => {
  const blue = {
    backgroundColor: blue,
  };
  return (
    <>
      <div className="green">green</div>
      <div style={blue}>blue</div>
    </>
  );
};

在这种情况下，通常有两种常见的方法来导入常规的CSS文件，一种是从外部文件中导入并使用，另一种是在JS文件中进行写入并以对象形式呈现。这是默认的主流方式。这种情况下存在很多选项，对于初学者来说很容易混淆，而且如果在JS文件中编写，则必须使用驼峰命名法，而不是background-color，这更加增加了混淆因素。

Vue（一种流行的JavaScript框架）

首先，一定可以将其放入一个文件中！在.vue文件中可以直接使用常规方式，并在

标签中编写CSS！

<template>
  <div class="red">red</div>
</template>
<style>
.red {
  background-color: red;
}
</style>

此外，通过给style标签添加scoped属性，可以在不影响子组件或父组件的情况下应用CSS样式，从而大大提高了书写的便利性！

总结

请问感觉如何呢？
在本文中，我们已经阐述了为什么Vue对初学者是一个不错的选择。
当然，由于框架的特点，我们需要根据情况选择合适的工具。
在熟悉前端之后，不妨尝试一下React呢？
感谢您的阅读！?

可以参考

【React】再渲染机制与优化
React中的“副作用”是什么？
Vue.js官方文档：与其他框架的比较

添加

✖
广告
将在 10 秒后关闭
bannerAds