React vs Vue — การจัดการเหตุการณ์

React เป็นไลบรารีส่วนหน้าที่ได้รับความนิยมมากที่สุดในช่วงไม่กี่ปีที่ผ่านมา

Vue เป็นเฟรมเวิร์กส่วนหน้าที่ได้รับความนิยมจาก React ในช่วงไม่กี่ปีที่ผ่านมา

เป็นการยากที่จะเลือกระหว่าง 2 กรอบงานเนื่องจากมีทั้งข้อดีและข้อเสีย เมื่อเราเลือกสิ่งหนึ่ง เราต้องยึดติดกับมันไปอีกสองสามปี

ในบทความนี้ เราจะมาดูว่าเราเขียนโค้ดจัดการเหตุการณ์ด้วย 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 เราสามารถเขียนได้:

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

ด้วย 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

React vs Vue — การจัดการเหตุการณ์

การจัดการเหตุการณ์ขั้นพื้นฐาน

การปรับเปลี่ยนพฤติกรรมการจัดการเหตุการณ์

การจัดการกับการกดปุ่ม

คำตัดสิน

คำถามในหัวข้อ