Doniyor

Vue 3 da watch methodi

2024-11-24T19:34:13.839Z

watch() metodi reaktiv ma'lumotlardagi o'zgarishlarni kuzatish va ularga javob qaytarish uchun ishlatiladi. Bu metod quyidagi asosiy xususiyatlarga ega:

Asosiy xususiyatlari

Side Effects: Reactive data o'zgarganda side effect'larni bajarish imkonini beradi
Async Operations: Async operatsiyalarni bajarish imkoniyati
Control: Watching boshlanishi va to'xtatilishini nazorat qilish
Deep watching: Obyektlarni chuqur kuzatish imkoniyati

Basic Usage

import { ref, watch } from 'vue'

const searchQuery = ref('')
const searchResults = ref([])

// Basic watcher
watch(searchQuery, async (newQuery, oldQuery) => {
  if (newQuery.trim()) {
    const results = await fetchSearchResults(newQuery)
    searchResults.value = results
  } else {
    searchResults.value = []
  }
})

Multiple Sources

Bir nechta source'larni kuzatish mumkin:

const firstName = ref('John')
const lastName = ref('Doe')

watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`Name changed from ${oldFirst} ${oldLast} to ${newFirst} ${newLast}`)
})

Deep Watching

Obyekt ichidagi o'zgarishlarni ham kuzatish:

const user = reactive({
  name: 'John',
  profile: {
    age: 25,
    city: 'Tashkent'
  }
})

// Deep watcher
watch(user, (newValue, oldValue) => {
  console.log('User data changed:', newValue)
}, { deep: true })

Immediate Watching

Watcher ni darhol ishga tushirish:

const todoId = ref(1)
const todoData = ref(null)

watch(todoId, async (newId) => {
  todoData.value = await fetchTodo(newId)
}, { immediate: true })

Watch vs watchEffect

Vue 3 da ikkita watching mexanizmi mavjud:

watch

Aniq source va callback bilan ishlaydi
Old va new qiymatlarni taqdim etadi
Watching qachon ishga tushishini nazorat qilish mumkin

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log(`Counter changed from ${oldValue} to ${newValue}`)
})

watchEffect

Avtomatik ravishda dependency'larni kuzatadi
Callback ichida ishlatilgan har qanday reactive value o'zgarganda ishga tushadi
Darhol ishga tushadi

const todos = ref([])
const error = ref(null)

watchEffect(async () => {
  try {
    todos.value = await fetchTodos()
  } catch (e) {
    error.value = e
  }
})

Stop Watching

Watcher'ni to'xtatish:

const stop = watch(source, callback)
// Kerak bo'lganda
stop()

Best Practices

Cleanup function ishlatish

watch(id, async (newId, oldId, onCleanup) => {
  const { response, cancel } = doAsyncWork(newId)
  
  // Agar yangi watcher ishga tushsa, oldingi requestni bekor qilish
  onCleanup(() => cancel())
  
  data.value = await response
})

Error Handling

watch(source, async (value) => {
  try {
    await someAsyncOperation()
  } catch (error) {
    console.error('Error in watcher:', error)
  }
})

Debouncing

import { debounce } from 'lodash'

const debouncedWatch = watch(searchInput, debounce((value) => {
  // Search logic here
}, 300))

Anti-patterns va Ogohlantirishlar

1. Computed property o'rniga watch ishlatish

// ❌ Yomon
watch([firstName, lastName], ([first, last]) => {
  fullName.value = `${first} ${last}`
})

// ✅ Yaxshi
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

Nega bu anti-pattern?

Performance: Watch har doim callback funksiyani to'liq bajaradi, computed esa keshlanadi va faqat dependency o'zgargandagina qayta hisoblanadi
Code readability: Computed aniq ko'rsatadiki bu yangi value hisoblanmoqda. Watch esa side-effect uchun mo'ljallangan
Debugging: Computed bilan value qayerdan kelayotganini kuzatish osonroq
Testing: Computed propertylarni test qilish osonroq chunki ular pure function

2. Bir watcher ichida ko'p vazifalarni bajarish

// ❌ Yomon
watch(user, () => {
  updateProfile()
  sendAnalytics()
  refreshUI()
  loadRelatedData()
})

// ✅ Yaxshi - Alohida watcherlar
watch(user, updateProfile)
watch(user, sendAnalytics)
watch(user, refreshUI)
watch(user, loadRelatedData)

Nega bu anti-pattern?

Maintainability: Har bir watcher alohida mas'uliyatga ega bo'lishi kerak (Single Responsibility Principle)
Error handling: Bitta funksiyada xato chiqsa, boshqa funksiyalar ham ishlamay qoladi
Testing: Ko'p vazifali watcherni test qilish murakkab
Debug qilish: Xato qaysi operatsiyada yuz berganini aniqlash qiyin

3. Watch ichida reactive data o'zgartirish

// ❌ Yomon
watch(count, (newCount) => {
  anotherCount.value = newCount * 2
})

// ✅ Yaxshi
const anotherCount = computed(() => count.value * 2)

Nega bu anti-pattern?

Infinite loop xavfi: Agar watched value watcherni ichida o'zgartirilsa, infinite loop yuzaga kelishi mumkin
State management murakkabligi: Reactive datani bir necha joyda o'zgartirish debug qilishni qiyinlashtiradi
Vue'ning reaktivlik tizimidan noto'g'ri foydalanish: Bu vazifa computed property uchun mo'ljallangan

4. Watcherda og'ir operatsiyalarni to'g'ridan-to'g'ri bajarish

// ❌ Yomon
watch(searchQuery, (query) => {
  const results = heavyComputation(query)
  searchResults.value = results
})

// ✅ Yaxshi
watch(searchQuery, debounce(async (query) => {
  const results = await heavyComputation(query)
  searchResults.value = results
}, 300))

Nega bu anti-pattern?

Performance: Har bir o'zgarishda og'ir hisob-kitoblar UI ni sekinlashtiradi
User Experience: Foydalanuvchi kiritayotgan vaqtda ham hisob-kitoblar amalga oshiriladi
Resource usage: Keraksiz hisob-kitoblar tizim resurslarini behuda sarflaydi

5. Deep watching ni keraksiz ishlatish

// ❌ Yomon
watch(complexObject, (newVal) => {
  // Something with newVal
}, { deep: true })

// ✅ Yaxshi - Faqat kerakli propertyni kuzatish
watch(() => complexObject.specificProperty, (newVal) => {
  // Something with newVal
})

Nega bu anti-pattern?

Performance: Deep watching katta obyektlar uchun sezilarli performance yo'qotishga olib keladi
Unnecessary updates: Keraksiz propertylar o'zgarganda ham watcher ishga tushadi
Memory usage: Vue har bir property uchun reactive wrapper yaratishi kerak bo'ladi

6. watchEffect ichida async operatsiyalarni noto'g'ri boshqarish

// ❌ Yomon
watchEffect(async () => {
  const data = await fetchData()
  results.value = data
})

// ✅ Yaxshi
watchEffect((onCleanup) => {
  const controller = new AbortController()
  onCleanup(() => controller.abort())
  
  fetchData({ signal: controller.signal })
    .then(data => {
      results.value = data
    })
})

Nega bu anti-pattern?

Race conditions: Oldingi request tugatilmasdan yangi request boshlanishi mumkin
Memory leaks: Cleanup funksiyasisiz eskii requestlar to'planib qolishi mumkin
State inconsistency: Natijalar noto'g'ri tartibda kelishi mumkin

Best Practice Recommendations

Watch o'rniga computed ishlatish mumkin bo'lgan holatlarni aniqlang

Agar yangi value hisoblash kerak bo'lsa - computed ishlating
Agar side-effect (API call, DOM manipulation) kerak bo'lsa - watch ishlating

Watcherlarni kichik va aniq vazifalar uchun ajrating

Har bir watcher bitta vazifani bajarsin
Vazifalar bir-biriga bog'liq bo'lsa, alohida composable funksiya yarating

Async operatsiyalar uchun cleanup ishlatishni unutmang

Race conditionlardan qochish uchun
Memory leaklarni oldini olish uchun
Network requestlarni to'g'ri boshqarish uchun

Watch va watchEffect ni to'g'ri tanlang

Watch - aniq dependency va old/new value kerak bo'lganda
watchEffect - dependency avtomatik aniqlanishi kerak bo'lganda

Performance optimizatsiyasi

Deep watching o'rniga specific propertylarni kuzating
Debounce/throttle qo'llang
Og'ir operatsiyalarni optimize qiling

Hozircha shu, keyingi postlarda ko'rishguncha. Stay tuned...
@peaceofcode

Computed properties

2024-08-27T11:15:12.332Z

computed() method reaktiv va kuzatuvchan xususiyatlarni yaratish uchun ishlatiladi. Bu metod quyidagi asosiy xususiyatlarga ega:

Create aggregate value: Boshqa reaktiv ma'lumotlarga asoslangan qiymatlarni hisoblaydi.
Caching: Natijani keshlashtiradi va faqat bog'liq ma'lumotlar o'zgargandagina qayta hisoblaydi.
Getter function: computed() ga uzatiladigan funksiya getter sifatida ishlaydi.
Reactivity: Hisoblangan xususiyat o'zgarsa, undan foydalanuvchi komponentlar avtomatik ravishda yangilanadi.

Create aggregated value

import { computed, ref } from 'vue'

const user = reactive({
  firstName: 'Doniyor',
  lastName: 'Yusupov',
  status: 1
})

const statusMap = {
 0: 'Created',
 1: 'Verified'
}

const fullName = computed(() => `${user.firstName} ${user.lastName}`) // Doniyor Yusupov

const userStatus = computed(() => statusMap[user.status]) // 'Verified'

Bu Create aggregate value uchun misol edi. Ya'ni bir reactive object dan bir nechta reactive object larni create qilishimiz mumkin.

Caching

import { ref, computed } from 'vue'

const numbers = ref(Array.from({ length: 10000 }, (_, i) => i + 1))
const searchTerm = ref('')

const filteredAndSortedNumbers = computed(() => {
  return numbers.value
    .filter(num => num.toString().includes(searchTerm.value))
    .sort((a, b) => b - a)
    .slice(0, 100)
})

function useNumbers() {
  function updateSearchTerm(newTerm) {
    searchTerm.value = newTerm
  }

  return {
    filteredAndSortedNumbers,
    updateSearchTerm
  }
}

<template>
  <div>
    <input v-model="searchTerm" @input="updateSearchTerm" placeholder="Qidirish">
    <ul>
      <li v-for="num in filteredAndSortedNumbers" :key="num">{{ num }}</li>
    </ul>
    ...
    <ul>
      <li v-for="num in filteredAndSortedNumbers" :key="num">{{ num }}</li>
    </ul>
  </div>
</template>

<script setup>
const { filteredAndSortedNumbers, updateSearchTerm } = useNumbers()
</script>

Bu misolda:

numbers - 10,000 ta elementdan iborat katta massiv.
searchTerm - foydalanuvchi kiritadigan qidiruv so'zi.
filteredAndSortedNumbers - hisoblangan xususiyat bo'lib, u quyidagi amallarni bajaradi:

Massivni filtrlaydi
Teskari tartibda saralaydi
Natijadan faqat birinchi 100 ta elementni oladi

Keshlashtirish afzalligi:

Samaradorlik: filteredAndSortedNumbers faqat numbers yoki searchTerm o'zgargandagina qayta hisoblanadi. Aks holda, keshlashtirish natijasidan foydalaniladi.
Takroriy hisob-kitoblardan qochish: Agar komponentda filteredAndSortedNumbersga bir necha marta murojaat qilinsa ham, hisob-kitob faqat bir marta bajariladi.
Tezkorlik: Foydalanuvchi interfeysi sezilarli darajada tezroq ishlaydi, chunki murakkab hisob-kitoblar faqat zarur bo'lgandagina bajariladi.

Reacts only to reactive data change

computed() methodi faqat reactive data o'zgarsagina callback ishlaydi.

const now = computed(() => Date.now())
const counter = computed(() => localStorage.getItem('counter'))

Bu misollarda now va counter o'zgaruvchilari bir marta initialization paytida set qilinadi va boshqa o'zgarmaydi chunki Date ham localStorage ham reactive emas.

Writable computed - Not recommended

Ccomputed properties default holatda getter funksiyaga ega. Kamdan-kam hollarda sizga writable computed value kerak bo'ladi. Agar siz computed value ga yangi qiymat bermoqchi bo'lsangiz, Runtime warning chiqadi. Agar kerak bo'sa siz uni ham getter, ham setter funksiyalarni ta'minlash orqali yaratishingiz mumkin.

import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

Best practices

Computed getter funcsiyalar faqatgina Pure computation uchun va Side-effect lardan holi bo'lgan xolda ishlatilishi kerak. Masalan quyidagilarni computed bn ishlatmaslik lozim:
- DOM ga o'zgartirish kiritish
- boshqa state ni o'zgartirish
- async request lar ishlatish

Computed value ni mutate qilmang. Uni faqat source state o'zgargan holda o'zgaradigan va shu value orqali hisoblangan qiymat deb qabul qiling.

"Writable computed larchi?" deyishingiz mumkin.
Writable computedlarni tepadagi Anti-patternlar sabab ishlatish tavsiya etilmaydi. Source state o'zgarganda boshqa stateni o'zgartirish uchun yoki async request lar uchun esa bizda Watcher lar bor.

Watcher lar uchun ham alohida post yozamiz. Siz bilmagan va kutmagan narsalar bo'lishi mumkin. Stay tuned...

@peaceofcode

Vue Suspense component ⏳

2024-07-18T16:15:44.036Z

Kontent yuklanishini kutish (Content loading) - bu web UX ning ajralmas qismidir. Internet tezligini o'ynashi hatto eng tezkor ilovalarni ham sekinlashtirishi mumkin, bu esa foydalanuvchining o'ylash va diqqatini buzish xavfini tug'diradi.

Yaxshi ishlab chiqilgan loading indikatorlar foydalanuvchiga to'gri feedback beradi — ularning so'rovi tizim tomonidan "eshitilganini" tasdiqlaydi, Loading progress ni ko'rsatadi va hatto kutilayotgan vaqt qisman kamaygandek tuyuladi.

Vue 3’s Suspense component

SPA da ayniqsa Loading experience yaxshi bo'lmaydi. Sababi content ni yuklashda juda ko'p Fetch request lar berilgani sababli UI da Spinner ustiga spinner va har xil progress bar larga to'lib ketadi. Shu narsani oldini olish uchun Vue 3 Suspense Component ni taqdim qildi. Suspense component bizga data-fetching qiladigan ko'p componentlarni coordinate qiladigan va Loading experience ni yaxshilaydigan yangi patternni beradi. Keling chuqurroq ko'rib chiqamiz.

Render, then fetch

Odatiy SPA application larda view ko'p componentlardan va nested componentlardan tashkil topgan bo'ladi. Va bu componentlar o'z content ini o'zi yuklashi mumkin. Suspense component siz odatiy loading pattern o'z ichiga mounted da data ni fetch qiladi, shuningdek loading va error ni ham ko'rsatadi:

View ni shunday componentlar bilan to'ldirsak har bir component kerakmas re-render lar yoki layout shift larga olib kelishi mumkin.

Without Suspense Component

Fetch, then render

Suspense esa hamma children component lardagi asinxron data fetching tugamaguncha Component tree ni render qilishni to'xtatib turadi. Componentda data-fetching borligini Suspense u component ni <script async setup> ligidan yoki <script setup> ning ichida top-level await borligidan biladi. E'tibor bering - Loading va Error logikasi individual component tomonidan boshqarilmayapti:

Endi componentlar Viewda har xil vaqtda resolve bo'lmaydi. Suspence Component hamma componentlar o'zining async request larini tugatmagunicha fallback ni ko'rsatadi va qandaydir error chiqsa onErrorCaptured hook ni ishga tushiradi:

With Suspense Component

Keling Suspense component ni bir nechta amaliy misollarda ko'rib chiqamiz.

Chap tarafda har bir component loading ni o'zi kontrol qilmoqda va content lar har xil vaqtda render bo'lishmoqda.
O'ng tarafda esa birgina Suspense componentini view-level ga qo'yib hamma component uchun umumiy Loading indikatorini ko'rsatib, bir vaqtda render qilishimiz mumkin.

Error larni ham shunda global qilishni iloji bor:

Nested Async component lar uchun Suspense componentni ishlatish

Qachonki bir necha data-fetching component lar component tree da nested bo'lsa, sahifa keraksiz re-render lar ni amalga oshiradi. Suspense esa nested component larni ham asinxron amallarini tugatgunicha kutib turadi va content sahifada bir marotaba render boladi.

Suspense component ni ichida nested component larni yuklanish ketma ketligini kontrol qilamiz

Faraz qilaylik, bizda ma'lum bir component uzoq load boladi. Bu ssenariyda qolgan content ni birinchi ko'rsatib, uzoq load bo'ladigan component larni orqa tomonda yuklanishini kutamiz. Biz bunga shu component ni o'zini alohida Suspense ga o'rashimiz kerak bo'ladi.

Chap tarafda bitta umumiy Suspense ga o'ralgan 2 ta tez yuklanadigan va 1 ta uzoq yuklanadigan component.
O'ng tarafda umumiy Suspense ga o'ralgan 2 ta tez yuklanadigan va o'zi alohida Suspense ga o'ralgan uzoq yuklanadigan component.

Hullas biz Suspense component bizga qanday qilib Loading experience ni yaxshilashga yordam berishini ko'rib chiqdik.

Qo'shimcha savollaringiz bo'lsa sizni o'z kanalimda kutaman.

Hurmat bilan Doniyor (PeaceOfCode)

P.s. Special thanks to Arcana Network Blog for images and Ajith Ranka for practical examples.

Async Components in Vue

2024-07-17T04:51:19.957Z

Katta web ilovalarni dasturlashda, ularning tez yuklanishi va interaktiv elementlarining javob berish tezligi UX ga katta ta'sir ko'rsatishi mumkin. Web-ilovalar o'lchami va murakkabligi ortib borar ekan, katta hajmdagi kodlarni faqat kerak bo'lganda yuklashni ta'minlash muhim ahamiyat kasb etadi. Shu yerda Vue dagi asinxron komponentlar yordamga keladi.

Faraz qiling bizda oddiy modal component bor va parent da button bosilganda shu modal component render bo'lishi kerak.
Modal component o'z ichiga faqat style va modal qanday paydo bo'lishini belgilaydi.

src/components/Modal.vue

App componentda Button va uni bosganda reactive boolean o'zgaruvchi (showModal) yordamida render bo'lishi kerak bo'lgan Modal component render bo'ladi. Modal shu showModal o'zgaruvchisi orqali ko'rsatiladi/berkitiladi.

src/App.vue

When we click the Show Modal button, the modal is shown on the page.
Show Modal tugmasi bosilganda sahifada modal paydo bo'ladi.

Boshlang'ich holati

Tugma bosilgandagi holat

Ko'rishingiz mumkinki Modal.vue faqat tugmani bosganimizda paydo bo'lsa ham Browser Network loglarida asosiy bundle bilan birga yuklanmoqda.

Ho'sh biz Modal.vue ni faqat tugma bosilgandagina yuklanishini xohlasak, bizga defineAsyncComponent() funksiyasi kerak bo'ladi

src/components/AsyncModal.ts

Endi App componentda AsyncModal ni import qilib, oddiy Modal ni o'rniga almashtirishimiz kerak.

src/App.vue

Endi shu kichik o'zgarish orqali bizning modal asinxron yuklanadi. Sahifamizning boshlang'ich holatida Modal component asosiy bundle bilan yuklanmayotganini ko'rishimiz mumkin.

Boshlang'ich holati

Show Modal tugmasini bosganimizdan keyingina Modal.vue componenti yuklanmoqda.

Tugma bosilgandan keyingi holat

Loading va Error UI

Vue bizga defineAsyncComponent() asinxron componentni yuklashdan tashqari ushbu component yuklanish vaqtidagi loading protsessini va yuzaga kelgan xatolik haqida ma'lumotni ko'rsatish imkonini beradi. Bu esa bizga o'z navbatida internetning har qanday holatida ham silliq UX ni ta'minlashga yordam beradi.

loadingComponent

Tepadagi tugmani bosgan paytda Modal.vue yuklangunicha bo'lgan vaqtda UI da uzilish bo'lmasligi uchun defineAsyncComponent() bizga qo'shimcha loadingComponent optionini ham beradi. Undan foydalanishimiz uchun biz defineAsyncComponent ga import funksiyasini emas, object beramiz va import funksiyani loader option iga qo'yamiz:

Bizda oddiy Loading component bor:

src/components/Loading.vue

Biz uni loadingComponent optioniga beramiz

src/components/AsyncModal.vue

Loading ni ko'rish uchun Network da internet tezligini Slow 3G ga o'tkazib sekin internet holatini sun'iy ko'rinishda yuzaga keltiramiz (Bo'lmasam Loading... chiqishini ko'rishni iloji yo'q).

Tugma bosilgandan keyingi holat

Browser Modal.vue ni yuklab bo'lgach uni Loading component bilan almashtiradi.

Yuklab bo'lganidan keyingi holat

errorComponent

Huddi loadingComponent kabi defineAsyncComponent() bizga errorComponent optionini beradi. Keling oddiy Error.vue componentini yasaymiz:

src/components/Error.vue

Endi uni errorComponent optioniga beramiz

src/components/AsyncModal.ts

Error component ni ko'rish uchun browser ni Network tabida internet ni Offline qilish kerak bo'ladi.

defineAsyncComponent() yana bir qancha optionlar ni taqdim etadi: delay, timeout, suspensible va onError(). Bu optionlar dasturchiga componentni asinxron yuklash va UX ni kontrol qilishda ko'p imkoniyatlarni beradi. Ko'proq detallar haqida API documentation ga murojaat qilishingizni so'rayman.

Darsligimiz yoqdi degan umiddamiz. https://t.me/peaceofcode ni kuzatib boring, yanada ko'proq mavzularni O'zbek tilida yoritib borishga harakat qilamiz. 🫰

Hurmat bilan, Doniyor.