1-maqola https://teletype.in/@munira25/ref_reactive

2-maqola https://teletype.in/@munira25/vue-reactivity-ref-reactive

Vue 3 da reaktiv ma'lumot yaratishning ikki asosiy usuli bor: ref() va reactive().

ref()

Har qanday turdagi qiymat uchun ishlatiladi — string, number, boolean, array, object. Qiymatga .value orqali murojaat qilinadi.

reactive()

Faqat ob'ekt va massiv uchun ishlatiladi. .value kerak emas, to'g'ridan-to'g'ri murojaat qilinadi:

Muhim farq — destructure qilganda

reactive() ni destructure qilsangiz reaktivlik yo'qoladi:

ref() da bu muammo yo'q

Intervyu uchun qisqa javob

Javoblarni har biriga(qisqa bolsa bir nechtasi) alohida keng maqola yoziladi

Aslida component run bolish jarayoni

template domga qo'yishdan oldin ishlaydi

Qisqa xulosa
Lifecycle Hooks 0-1-0 barcha jarayoni ushlash

npm install pinia

Pinia ni 2xil usulda yozish mumkin Composition API va Options API.

strukturada farq qiladi. farqi oddiy component qanday farq qilsa shunday .

options API bilan pinia ni tushunish osonroq. ammo Composition API zamonaviyroq. shu sababli avval options API da piniani organamiz va composition APi da qanday bolishi koramiz

1. Tarkib

pinia 3ta narsadan tashkil topgan

• state - qiymat (ma'lumotni saqlaydi)
• getter - hisob kitob (ma'lumotni hisoblaydi)
• action - function (ma'lumotni o'zgartiradi)

Header.vue da +1 bosilsa — App.vue da ham yangilanadi. Chunki ikkalasi bir xil storeni ishlatmoqda.

yuqoridagi misolda state va action ishlatilgan. storeni chaqirib istalgan joyda ishlatamiz action bajarilganda hamma joyda qiymatlar avtomatik ozgaradi

2. getter

Getter — hisoblangan qiymat

State dagi ma'lumotdan yangi qiymat hisoblash uchun ishlatiladi. computed ga o'xshash.

qiymatni ozgartirish emas faqat biror hisob kitob qilib qaytarish kerak bolsa ishlatiladi.

Options APIda

Composition API da

State o'zgarsa — getter avtomatik qayta hisoblanadi. Xuddi computed kabi

Xotira (memory) bilan store ning aloqasi:

Pinia store — bu shunchaki JavaScript obyekti, brauzer xotirasida (RAM) saqlanadi.

Qisqa xulosa

pinia - global ombor . options API va Composition API da strukturada yoziladi

state, getter, actiondan iborat . getter -computed kabi ishlaydi . state options APIda this , Composition API dan ref/reactive bilan ishlatiladi

istalgan childda chaqirish mumkin . ammo yon componentlar (aka-ukalar) orasida emas

Provide ni <Root /> da ishlatib boshqalarida ishlatish mumkin . ammo

<Header /> da e'lon qilingan provideni <Main /> da inject qilolmaymiz .

provide/inject parent-childga asoslan

2.childdan parentga qiymat jonatsa boladimi ?

Texnik jihatdan ha, lekin bu noto'g'ri yondashuv.

parent funksiya jonatadi . child shu funksiyaga qiymat biriktirib qaytaradi

Qisqa xulosa

provide/inject aka-ukalar orasida ishlamaydi

child parentga funksiya orqali qiymat jonatadi

provide / inject - props drilling ga qarshi ishlatiladi

"props drilling" - Props orqali ma'lumot uzatish ichma -ich childga jo'natish.(rasm)

bizga component1 dan component4 ga malumot kerak bolsa lekin orada malumot kerak bolmasa provide inject ishlatiladi.

provide parentda jonatib beradi

inject childda shu qiymatni turib oladi .

2 - Reactive qiymat

parentdagi qiymat o'zgarsa childda avtomatik ozgaradi.

ref qiymat jonatilganda .value bn berilmaydi. aks holda reaktivlik yoqoladi

3. Funksiya provide qilish

funksiyani jonatish/qabul qilish qiymat jonatish bilan bir xil boladi

Yagona farq — inject qilgandan keyin qanday ishlatishda:

4.defult qiymat

inject qilganda default qiymatni berish mumkin. provide yoq bolgan holati uchun

Qisqa xulosa

provide / inject istalgan childga propssiz qiymat jonatish

Qisqa xulosa v-model aslida props + emit ning qisqartmasi

Emit => bu bola komponentdan ota komponentga hodisa (event) yuborish usuli.

props " : " orqali qiymatlarni jonatadi

propsni child defineProps orqali qabul qiladi .

emit parentga action jonatish uchun ishlatiladi. qiymat jonatmasdan faqatgina functionni ozini ishlatsa ham bo'ladi . codeda umimiy yozilgan

defineProps , defineEmits , defineExpose import qilinmaydi. bular Vue 3 da "compiler macros" deb ataladi. Ya'ni Vue ularni avtomatik taniydi, import qilmasdan ishlatish mumkin

import qilsa ham xato emas

umumiy qoida

Qisqa xulosa

props parentdan childga qiymat jonatadi. emit childdan parentga action jonatadi

Oddiyroq qilib aytganda:

• Props — ota gapiradi, bola eshitadi
• Emit — bola gapiradi, ota eshitadi

Computed properties — bu data properties'ga o'xshash, lekin boshqa xususiyatlarga bog'liq bo'lgan maxsus xususiyatlar. Ular method kabi yoziladi, lekin hech qanday argument qabul qilmaydi. Dependency (bog'liqlik) o'zgarganda avtomatik yangilanadi.

Vue.js'dagi computed properties — bu boshqa ma'lumotlarga bog'liq holda avtomatik hisoblanadigan xususiyatlar.

Template ichida murakkab hisob-kitob yozish kodni chalkashtirib yuboradi. Shu murakkab mantiqni computed ichiga olib chiqish kodni toza va o'qilishi oson qiladi.

Computed vs Method farqi

Computed natijani keshlaydi — ya'ni bog'liq data o'zgarmaguncha qayta hisoblamaydi, shunchaki oldingi javobni qaytaradi. Method esa har safar chaqirilganda qaytadan ishlaydi. Shuning uchun katta hisob-kitoblarda computed ancha samarali.

Qoida: Computed faqat qiymat hisoblashi kerak, data o'zgartirish yoki boshqa yon ta'sirlar (side effects) bo'lmasligi lozim. Agar holat o'zgartirish kerak bo'lsa — method ishlatiladi.

Computed ichida = belgisi bilan biror narsaga qiymat berish ko'rsangiz — bu xavfli signal. Computed faqat return qilishi kerak, boshqa hech narsa.

qisqa xulosa : computed - qiyin logikalarni hisoblash uchun kerak. methoddan farqi computedda faqat hisoblanadi biror narsaga tenglashtirilmaydi. ustunlik tomoni qiymatni keshlaydi

Asosiy xususiyatlari:

• Lazy — faqat o'zgarish bo'lganda ishlaydi (darhol emas)
• Aniq manba — qaysi qiymat kuzatilishini ko'rsatiladi
• oldVal va newVal ikkalasi ham mavjud

()=> kuzatilishi kerak bolgan qiymat

()=> bajariladigan amal

avvalgi va keyingi qiymatlar 2chi calback ichiga yoziladi.

yuqoridagi codeda vazifasi - ortiqcha zapros yoki bosh qiymat ketmasligini taminlash

watchda qo'shimcha sozlamalar bor

immediate: true

watch aslida lazy(ozgarganda) ishlaydi . ammo bizga ekran yuklanganda kerak bolsa immediate: true qilib ishlatamiz

codedagi vazifasi agar update qilib kirganda contractId backendan kelsa apiga zapros ketsin

deep:true

watch() default holatda faqat birinchi darajadagi o'zgarishlarni kuzatadi. Ichki (nested) ob'ektlar uchun deep: true kerak:

Ammo deep bilan bogliq muammo bor. deep oldValueda age ni yangi qiymatini chiqaradi

shu sababli

Qisqa xulosa

watch - aniq qiymat o'zgarishni kuzatadi .

deep - ichki kuzatuv, immediate -lazy