Vue 3'da reaktivlik tizimi qanday tuzilgan?

Savol

Vue 3'da reaktivlik tizimi ichkarida qanday ishlaydi?

Qisqa javob

Vue 3 obyektlarni xususiyatlarni o'qish va yozishni ushlaydigan Proxyga o'raydi. Render paytida xususiyat o'qilganda Vue "kim unga obuna bo'lgan"ligini eslab qoladi, yozish paytida esa barcha obunachilarni qayta render qilishga xabar beradi.

Batafsil javob

Ikkita asosiy primitiv:

• reactive(obj) — obyektni Proxyga o'raydi. get/set ushlagichlari bog'liqliklarni kuzatish (track) va xabar berish (trigger)ni amalga oshiradi. Faqat obyektlar/massivlar bilan ishlaydi.
• ref(value) — yagona .value xususiyatiga ega o'rov (wrapper). To'g'ridan-to'g'ri proksi qilib bo'lmaydigan primitivlar (number, string) uchun kerak. ref ichida ham obyekt-o'rov orqali Proxyga o'xshash getter/setter ishlatiladi.

Bog'liqliklar mexanizmi:

1. "Effekt" bajarilishi paytida (masalan, komponentning render funksiyasi yoki computed) Vue joriy faol effektni o'rnatadi.
2. Reaktiv xususiyat o'qilganda Proxy'ning getter/setter'i shu effektni xususiyatning bog'liqligi sifatida ro'yxatga oladi (track).
3. Xususiyatga yozilganda Vue barcha bog'liq effektlarni topadi va ularni qayta ishga tushiradi (trigger) — bu React'dagi kabi butun daraxt bo'ylab virtual DOM'ni to'liq solishtirmasdan, nuqtali yangilanishdir.

Shablonlarda ref avtomatik ravishda "yechiladi" (unwrap), shuning uchun count.value emas, count deb yoziladi — buni shablon kompilyatori bajaradi.

Misol

import { reactive, effect } from 'vue'

const state = reactive({ count: 0 })

effect(() => {
  console.log('Joriy qiymat:', state.count) // state.count'ga obuna
})

state.count++ // yuqoridagi effekt avtomatik qayta bajariladi

Qo'shimcha savollar

• Nega reactive primitivlar bilan ishlamaydi, ref esa ishlaydi?
• reactive-obyektni destrukturizatsiya qilganda nima bo'ladi va buni qanday tuzatish mumkin (toRefs)?
• Proxyga asoslangan reaktivlik (Vue 3) Object.definePropertydan (Vue 2) nimasi bilan farq qiladi?