React adalah perpustakaan front end paling populer selama beberapa tahun terakhir.

Vue adalah kerangka kerja front-end yang popularitasnya semakin meningkat seiring dengan React dalam beberapa tahun terakhir.

Sulit untuk memilih di antara kedua kerangka kerja tersebut karena keduanya memiliki kelebihan dan kekurangan. Saat kami memilih satu, kami harus mematuhinya selama beberapa tahun.

Pada artikel ini, kita akan melihat bagaimana kita menulis kode penanganan event dengan React dan Vue dan mana yang lebih nyaman.

Penanganan Peristiwa Dasar

Dengan React, kami mengikat event handler kami langsung ke komponen JSX.

Misalnya, kita dapat menulis kode berikut untuk menangani klik dengan 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>
  );
}

Pada kode di atas, kita menambahkan handler increment click dan meneruskannya ke prop onClick sehingga ketika kita mengklik tombol Kenaikan, kita akan melihat nilai count meningkat.

Dengan Vue, kita dapat menulis perintah berikut untuk melakukan hal yang sama:

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++;
    }
  }
});

Pada kode di atas, kita memiliki handler increment seperti yang kita lakukan pada contoh React.

Namun, memperbarui nilai lebih mudah karena kita memperbarui count secara langsung daripada memanggil fungsi yang dikembalikan dari kait useState untuk memperbarui hitungan.

Melewati pengendali klik hampir dilakukan dengan cara yang sama, hanya saja kita harus ingat untuk menggunakan direktif @click.

Menangani klik pada kedua kasus hampir sama.

Memodifikasi Perilaku Penanganan Peristiwa

Vue memiliki pengubah peristiwa untuk mengubah perilaku bagaimana pengendali peristiwa menangani peristiwa.

Kita dapat menempatkannya setelah arahan penanganan acara. Misalnya, jika kita ingin mencegah perilaku pengiriman default dalam formulir, kita menulis:

<!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);
    }
  }
});

untuk menambahkan formulir dengan pengendali pengiriman yang tidak melakukan perilaku pengiriman default.

Pengubah .prevent adalah pintasan praktis untuk memanggil e.preventDefault di pengendali kiriman kita.

Dengan React, kita harus memanggil preventDefault() .

Contoh yang setara di React adalah:

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>
  );
}

Versi Vue sedikit lebih pendek, namun tidak terlalu jauh berbeda.

Menangani Penekanan Tombol

Dengan Vue, kita dapat menangani penekanan tombol dengan event handler kita dengan pengubah direktif v-on seperti yang kita lakukan dengan klik.

Misalnya, jika kita ingin menampilkan peringatan ketika kita mengontrol-klik pada sebuah div, kita dapat menulis:

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");
    }
  }
});

Dalam kode di atas, kita memiliki:

v-on:click.ctrl="help"

untuk menjalankan metode help saat kita mengontrol-klik pada div.

Dengan React, kita harus menggunakan JavaScript biasa untuk melakukan ini:

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>
  );
}

Dalam kode di atas, kita memiliki pengendali onClick yang pertama-tama menghentikan penyebaran peristiwa ke induknya.

Kemudian kita periksa apakah ctrlKey ditekan dengan klik.

Kemudian kita menampilkan alert jika e.ctrlKey adalah true yang berarti tombol kontrol ditekan.

Ini jelas lebih kompleks dengan React. Jika kita ingin menangani kombinasi penekanan keyboard dan mouse yang lebih rumit, ini akan menjadi lebih sulit.

Dakwaan

Penanganan event lebih baik dengan Vue karena ia memiliki pengubah untuk mengubah perilaku arahan penanganan event.

Hal ini terutama berlaku ketika kita perlu menangani interaksi yang lebih kompleks seperti kombinasi keyboard dan mouse.

Tidak ada cara mudah untuk melakukan hal tersebut dengan React.