Vue — foydalanuvchi interfeyslarini yaratishga mo‘ljallangan ochiq kodli JavaScript frameworkidir. U deklarativ template, reaktiv holat va komponent modelini birlashtiradi. Vue kichik sahifaga bosqichma-bosqich qo‘shilishi yoki routing, state management va build vositalari bilan single-page application asosini tashkil qilishi mumkin.
Komponent tuzilishi
Vue komponenti template, mantiq va style qismlaridan tuziladi. Single-File Component .vue faylida ular <template>, <script> va <style> bloklarida saqlanadi.
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
Template interpolation qiymatni matnga chiqaradi, @click hodisa listenerini bog‘laydi. Vue reaktiv count o‘zgarganda kerakli DOM qismini yangilaydi.
Reactivity
Composition API’da ref primitive yoki bitta qiymatni, reactive esa obyektni reaktiv proxy sifatida saqlaydi. computed boshqa reaktiv qiymatlardan hosil bo‘lgan keshlangan natijani beradi. watch o‘zgarish yuz berganda side effect bajaradi.
Computed getter ichida tashqi yozuv yoki asinxron side effect joylashtirilmaydi; u berilgan state’dan qiymat hosil qiladi. Watch esa API chaqiruvi yoki storage sinxronlash kabi amal uchun mos. Reaktiv obyektni noto‘g‘ri destructuring qilish dependency kuzatuvini yo‘qotishi mumkin.
Props va events
Parent komponent childga props orqali ma’lumot beradi. Props one-way oqim bo‘lib, child uni to‘g‘ridan-to‘g‘ri o‘zgartirmaydi. Child o‘z hodisasini emit qilib parentga xabar beradi. Shu model komponentlar orasidagi javobgarlikni aniq qiladi.
Slot parentga child layoutining ma’lum joyiga template kontent berish imkonini beradi. Provide/inject chuqur component daraxtida umumiy dependency uzatadi, lekin haddan tashqari ishlatilsa ma’lumot manbasini yashiradi.
Rendering va lifecycle
Vue template’ni render function va virtual DOMga kompilyatsiya qiladi. Reaktiv dependency o‘zgarganda yangi virtual tree bilan oldingisi solishtiriladi va real DOMga zarur patch qo‘llanadi. v-if elementni yaratib-o‘chiradi, v-show esa CSS displayni almashtiradi.
Lifecycle hooklar komponent mount, update va unmount bosqichlarida kod bajaradi. Timer yoki tashqi listener unmountda tozalanmasa memory leak yuz berishi mumkin.
Ekotizim
Vue Router client-side route va nested viewlarni, Pinia esa umumiy state store’ni boshqaradi. Vite development server va build vositasi sifatida keng ishlatiladi. Server-side rendering va hydration Nuxt kabi framework orqali tashkil qilinishi mumkin.
Template foydalanuvchi matnini odatda escape qiladi, ammo v-html raw HTMLni chiqaradi va ishonchsiz kontent bilan XSS xavfi tug‘diradi. Frontend permission tekshiruvi interfeysni boshqaradi, haqiqiy authorization backendda bajariladi.
Directivelar va formalar
v-bind atributni expressionga, v-on hodisani handlerga bog‘laydi. v-model input qiymati va update hodisasi uchun ikki tomonlama ko‘rinadigan qulay sintaksis beradi, ammo data flow ichkarida prop va eventga ajraladi. Checkbox, radio va select qiymat semantikasi oddiy text inputdan farq qiladi. Modifierlar .trim, .number yoki event uchun .prevent kabi qayta ishlashni bildiradi. Formani faqat v-model mavjudligi validatsiya qilmaydi; required, format, server error va accessibility label alohida boshqariladi.
Async component
Route yoki og‘ir widget async component sifatida alohida chunkdan yuklanishi mumkin. Loading va error holati ko‘rsatiladi. Juda mayda chunklar ko‘p network request va boshqaruv overheadini oshirishi mumkin; code splitting foydalanuvchi yo‘li va bundle tahliliga asoslanadi.
Bog‘liq tushunchalar
JavaScript, component, reactivity, Composition API, Vue Router, Pinia, virtual DOM