computed va watch nima? Qaysi holatda nimasi yaxshiroq?

Savol

Vue'da computed va watch nima va qachon biri o'rniga ikkinchisi ishlatiladi?

Qisqa javob

computed — bog'liqliklar o'zgarganda qayta hisoblanadigan va side effect'siz sof funksiya bo'lishi kerak bo'lgan hosila, keshlanuvchi reaktiv qiymat. watch — reaktiv ma'lumotlar o'zgarishiga javoban bajariladigan side effect (serverga so'rov, localStorage'ga yozish, DOM'ni qo'lda o'zgartirish).

Batafsil javob

• computed(() => ...) boshqa reaktiv ma'lumotlardan hisoblanadigan qiymatga ega reaktiv havolani qaytaradi. Vue natijani keshlaydi va uni getter ichida ishlatilgan bog'liqliklardan kamida bittasi o'zgargandagina qayta hisoblaydi — o'zgarishlarsiz qayta murojaatlarda keshlangan qiymat qaytariladi. Joriy holatdan hosila bo'lgan yangi qiymat (filtrlangan ro'yxat, summa, formatlangan satr) olish kerak bo'lganda ishlatiladi.
• watch(source, callback) kuzatilayotgan manba o'zgarganda side effect bilan callback-funksiyani ishga tushiradi. Shablonda ishlatish uchun qiymat qaytarmaydi — ma'lumot o'zgarishiga javoban biror narsa qilish kerak bo'lganda ishlatiladi: serverdan ma'lumot olib kelish, localStoragega yozish, bildirishnoma ko'rsatish.

Amaliy qoida: agar natija — ko'rsatilishi yoki keyinroq ishlatilishi kerak bo'lgan qiymat bo'lsa — computed. Agar natija — amal (effekt) bo'lsa — watch.

Misol

<script setup>
import { ref, computed, watch } from 'vue'

const search = ref('')
const users = ref([{ name: 'Alice' }, { name: 'Bob' }])

// computed — hosila qiymat, keshlanadi, shablonda ishlatiladi
const filteredUsers = computed(() =>
  users.value.filter(u => u.name.toLowerCase().includes(search.value.toLowerCase()))
)

// watch — search o'zgarganda side effect
watch(search, (newValue) => {
  fetch(`/api/log-search?q=${newValue}`)
})
</script>

<template>
  <input v-model="search" />
  <ul>
    <li v-for="user in filteredUsers" :key="user.name">{{ user.name }}</li>
  </ul>
</template>

Qo'shimcha savollar

• Nega computed ichida side effect (masalan, API so'rovlari) bo'lmasligi kerak?
• watch watchEffectdan nimasi bilan farq qiladi?
• computed ichida Date.now() yoki Math.random() chaqirilsa nima bo'ladi?