React была самой популярной библиотекой переднего плана за последние несколько лет.

Vue - это интерфейсный фреймворк, который по популярности догоняет React, и его принимает невероятно страстное сообщество разработчиков.

Трудно выбрать между двумя фреймворками, поскольку у обоих есть свои плюсы и минусы. Выбирая одно из них, мы должны придерживаться его в течение нескольких лет.

В этой статье мы сравним атрибут настройки и отображение коллекций в React и Vue.

Установка атрибутов

С помощью React мы можем устанавливать такие атрибуты, как HTML. Но мы также можем установить динамические атрибуты в нашем приложении.

Например, для этого мы можем написать следующий код:

import React, { useState } from "react";
export default function App() {
  const [color, setColor] = useState("red");
  const toggleColor = () => {
    setColor(color === "red" ? "green" : "red");
  };
  return (
    <div className="App">
      <button onClick={toggleColor}>Toggle</button>
      <div className="box" style={{ color }}>
        foo
      </div>
    </div>
  );
}

В приведенном выше коде мы динамически устанавливаем цвет div с помощью ловушки useState, которая возвращает функцию setColor, позволяющую нам установить цвет.

Затем мы передаем color атрибуту style. Чтобы установить статическое имя класса для нашего div, мы должны использовать атрибут className. Когда мы устанавливаем атрибуты с помощью React, мы должны помнить о различиях типа className вместо class.

В Vue мы помещаем наши данные и методы в компонент и устанавливаем статические и динамические атрибуты следующим образом:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="toggleColor">Toggle</button>
      <div class="box" :style="{color: color}">
        foo
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js:

const app = new Vue({
  el: "#app",
  data: {
    color: "red"
  },
  methods: {
    toggleColor() {
      this.color = this.color === "red" ? "green" : "red";
    }
  }
});

С Vue мы должны добавить метод toggleColor к методу и значение по умолчанию для поля color в объекте data.

Затем мы должны добавить ту же логику для установки цвета в методе toggleColor.

Это сложнее, чем то, что у нас есть с React. Однако он разделяет логику отображения и бизнес-логику на отдельные части.

С этим легче справиться, когда наши компоненты более сложные.

Отображение коллекций

Мы можем отображать коллекции с помощью React, сопоставляя наши массивы с коллекцией компонентов.

Например, если у нас есть массив имен, мы можем написать следующее, чтобы отображать их с помощью React:

import React, { useState } from "react";
export default function App() {
  const [persons] = useState([
    { name: "Mary" },
    { name: "John" },
    { name: "Joe" }
  ]);
  return (
    <div className="App">
      {persons.map(p => (
        <div>{p.name}</div>
      ))}
    </div>
  );
}

В приведенном выше коде у нас есть массив persons, который затем сопоставляется с div с p.name в качестве текстового содержимого.

Чтобы сделать то же самое с Vue, мы можем написать следующее:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-for="p of persons">
        {{p.name}}
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js:

const app = new Vue({
  el: "#app",
  data: {
    persons: [{ name: "Mary" }, { name: "John" }, { name: "Joe" }]
  }
});

В приведенном выше коде у нас есть массив persons в компоненте Vue и директива v-for для отображения элементов в массиве persons.

Это чище, чем у React. Мы сохраняем код в каждом файле более компактным.

Это будет еще более очевидным, если более сложные компоненты будут более сложными, что часто и имеет место.

Еще одна хорошая вещь в v-for заключается в том, что мы можем использовать их также для перебора записей объекта.

Например, для этого мы можем написать следующее:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-for="(age, name) in persons">
        {{name}}: {{age}}
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js:

const app = new Vue({
  el: "#app",
  data: {
    persons: {
      John: 20,
      Mary: 19,
      Jane: 20
    }
  }
});

Мы можем получить значение и ключ записи объекта соответственно с помощью:

v-for="(age, name) in persons"

В React мы используем Object.entries, чтобы делать то же самое:

import React, { useState } from "react";
export default function App() {
  const [persons] = useState({
    John: 20,
    Mary: 19,
    Jane: 20
  });
  return (
    <div className="App">
      {Object.entries(persons).map(([name, age]) => (
        <div>
          {name}: {age}
        </div>
      ))}
    </div>
  );
}

Выражение становится более сложным, так как мы должны вызвать Object.entries, а затем сопоставить их с компонентом, который мы хотим визуализировать.

Вердикт

Для простых компонентов нет большой разницы между React и Vue, когда дело доходит до установки атрибутов.

Однако мы должны помнить, что все они написаны верблюжьим регистром, и имена могут отличаться от HTML.

У Vue здесь есть небольшое преимущество, так как нам не о чем беспокоиться. Динамические атрибуты могут быть установлены с помощью :, а все остальное то же самое.

С Vue мы должны изучить директиву v-for для рендеринга коллекций, в то время как мы просто используем простой JavaScript для этого с React.

Однако в React мы должны написать одно большое выражение для этого, а во Vue мы можем добавить директивы в шаблон для этого.

Это делает рендеринг коллекций более чистым с помощью Vue, поэтому Vue здесь также имеет небольшое преимущество.