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

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

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

В этой статье мы рассмотрим, как мы пишем код обработки событий с помощью React и Vue и какой из них удобнее.

Базовая обработка событий

С React мы привязываем наши обработчики событий прямо к компонентам JSX.

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

import React, { useState } from "react";
export default function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div className="App">
      <button onClick={increment}>Increment</button>
      <div>{count}</div>
    </div>
  );
}

В приведенном выше коде мы добавили обработчик increment click и передаем его в свойство onClick, чтобы при нажатии кнопки «Приращение» значение count увеличивалось.

С 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="increment">Increment</button>
      <div>{{count}}</div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js :

const app = new Vue({
  el: "#app",
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

В приведенном выше коде у нас есть обработчик increment, как и в примере React.

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

Передача обработчика кликов выполняется примерно так же, за исключением того, что мы должны помнить об использовании директивы @click.

Обработка кликов в любом случае практически одинакова.

Изменение поведения обработки событий

Vue имеет модификаторы событий, чтобы изменять поведение обработчиков событий при обработке событий.

Мы можем поместить их после директивы обработки событий. Например, если мы хотим предотвратить поведение отправки по умолчанию в форме, мы пишем:

<!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">
      <form v-on:submit.prevent="onSubmit">
        <input v-model="name" />
      </form>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js :

const app = new Vue({
  el: "#app",
  data: {
    name: ""
  },
  methods: {
    onSubmit() {
      alert(this.name);
    }
  }
});

чтобы добавить форму с обработчиком отправки, который не выполняет стандартное поведение отправки.

Модификатор .prevent - это удобный ярлык для вызова e.preventDefault в нашем обработчике отправки.

В React мы должны вызвать preventDefault().

Эквивалентный пример в React:

import React, { useState } from "react";
export default function App() {
  const [name, setName] = useState("");
  const onSubmit = e => {
    e.preventDefault();
    alert(name);
  };
  return (
    <div className="App">
      <form onSubmit={onSubmit}>
        <input onChange={e => setName(e.target.value)} />
      </form>
    </div>
  );
}

Версия Vue немного короче, но не сильно отличается.

Обработка нажатий клавиш

С Vue мы можем обрабатывать нажатия клавиш с помощью наших обработчиков событий с помощью модификаторов директивы v-on, как мы это делали с щелчками.

Например, если мы хотим отображать предупреждение, когда мы нажимаем на div, удерживая клавишу Control, мы можем написать:

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-on:click.ctrl="help">Help</div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js :

const app = new Vue({
  el: "#app",
  data: {},
  methods: {
    help() {
      alert("help");
    }
  }
});

В приведенном выше коде мы имеем:

v-on:click.ctrl="help"

чтобы запустить метод help, когда мы нажимаем на div, удерживая клавишу Control.

В React мы должны использовать для этого простой JavaScript:

import React from "react";
export default function App() {
  const onClick = e => {
    e.stopPropagation();
    if (e.ctrlKey) {
      alert("help");
    }
  };
  return (
    <div className="App">
      <div onClick={onClick}>Help</div>
    </div>
  );
}

В приведенном выше коде у нас есть onClick обработчик, который сначала останавливает распространение событий на своего родителя.

Затем мы проверяем, нажата ли ctrlKey с щелчком.

Затем мы отображаем предупреждение, если e.ctrlKey равно true, что означает нажатие клавиши управления.

С React это определенно сложнее. Если мы хотим обрабатывать еще более сложные комбинации нажатия клавиатуры и мыши, это становится еще сложнее.

Вердикт

Обработка событий лучше с Vue, поскольку в нем есть модификаторы для изменения поведения директив обработки событий.

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

С React нет простого способа сделать это.