API Styles (Hook vs Composibles)

ลักษณะ	Hooks (React)	Composables (Vue 3)
Framework	React	Vue 3
การใช้งาน	ใช้สำหรับการจัดการ state และ side effects ใน functional components	ใช้สำหรับการจัดการ state และ logic ที่สามารถ reuse ได้ใน Composition API
การเรียกใช้	เรียกใช้ภายใน functional components	เรียกใช้ภายใน setup function ของ component
Prefix	คำว่า "use" (เช่น useState, useEffect)	ไม่มี prefix ที่ตายตัว แต่ควรมีชื่อสื่อความหมาย (เช่น useUser)
โครงสร้าง	มักจะเป็น functions ที่มี state และ logic รวมกัน	มักจะเป็น functions ที่แยก state และ logic เพื่อ reuse ได้ง่าย
State	ใช้ useState สำหรับการจัดการ state	ใช้ reactive, ref หรือ reactive composition API เช่น reactive, ref, computed
Side Effects	ใช้ useEffect สำหรับการจัดการ side effects	ใช้ watch, watchEffect หรือ lifecycle hooks เช่น onMounted, onUnmounted
Lifecycle Hooks	จัดการผ่าน useEffect ด้วย dependencies array	จัดการผ่าน onMounted, onUnmounted, onUpdated ฯลฯ
การแชร์ Logic	สร้าง custom hooks ที่สามารถนำมาใช้ซ้ำได้	สร้าง composable functions ที่สามารถนำมาใช้ซ้ำได้
การจัดการ Context	ใช้ useContext เพื่อเข้าถึง context	ใช้ provide และ inject เพื่อจัดการ dependency injection
ความสามารถในการใช้งานร่วมกัน	Hooks สามารถใช้งานร่วมกันใน functional components เท่านั้น	Composables สามารถใช้งานร่วมกันได้ทั้งใน functional และ class-based components ผ่าน setup function

ตัวอย่าง

React Hooks

import { useState, useEffect } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return count;
}

function Counter() {
  const count = useCounter();
  return <div>{count}</div>;
}

Vue 3 Composables

import { ref, onMounted, onUnmounted } from 'vue';

function useCounter() {
  const count = ref(0);

  onMounted(() => {
    const interval = setInterval(() => {
      count.value++;
    }, 1000);
    onUnmounted(() => clearInterval(interval));
  });

  return count;
}

export default {
  setup() {
    const count = useCounter();
    return { count };
  },
  template: '<div>{{ count }}</div>',
};