سه ابزار اصلی واکنش‌گرایی Vue شبیه هم به نظر می‌رسند، اما هر کدام برای کار مشخصی ساخته شده‌اند. انتخاب درست کد را کوتاه‌تر و قابل‌پیش‌بینی‌تر می‌کند.

computed: مقدار مشتق‌شده

const price = ref(100);
const qty = ref(2);
const total = computed(() => price.value * qty.value);

نتیجه کش می‌شود و فقط با تغییر وابستگی‌ها دوباره محاسبه می‌شود. تابع computed نباید اثر جانبی داشته باشد (مثلاً درخواست شبکه یا تغییر state دیگر).

watch: واکنش به تغییر مشخص

watch(userId, async (id, oldId) => {
  user.value = await fetchUser(id);
});

منبع را صریح می‌دهید و مقدار قبلی و جدید را دارید؛ برای درخواست شبکه، ذخیره‌سازی یا وقتی می‌خواهید فقط با تغییر یک چیز خاص کاری کنید مناسب است. گزینهٔ immediate: true اجرای اولیه را هم اضافه می‌کند.

watchEffect: ردیابی خودکار

watchEffect(() => {
  document.title = title.value + " | " + site.value;
});

هر مقدار reactive که داخل تابع خوانده شود وابستگی حساب می‌شود و بلافاصله اجرا می‌شود. برای اثرهای ساده عالی است؛ اما وقتی وابستگی‌ها زیاد یا پنهان‌اند، watch با منبع صریح خواناتر است.

  • مقدار تازه از روی دادهٔ دیگر؟ ← computed.
  • کار جانبی در پاسخ به تغییر مشخص؟ ← watch.
  • اثر جانبی ساده با وابستگی‌های واضح؟ ← watchEffect.