Vue.js nima va uning asosiy g'oyasi nimada?

Savol

Vue.js nima, uning asosiy g'oyasi qanday va bu DOM'ni qo'lda boshqarishdan nimasi bilan farq qiladi?

Qisqa javob

Vue.js — foydalanuvchi interfeyslarini qurish uchun progressiv JavaScript freymvorki bo'lib, u UI'ni holatning funksiyasi sifatida deklarativ tasvirlashga va reaktivlikka asoslangan: ma'lumotlar o'zgarganda Vue DOM'ning qaysi qismlarini yangilash kerakligini o'zi topadi va buni samarali bajaradi. Ilova qayta ishlatiladigan komponentlardan yig'iladi.

Batafsil javob

Klassik yondashuvda (vanilla JS) dasturchi kerakli elementni document.querySelector orqali o'zi topadi, uning textContent'ini qo'lda o'zgartiradi, klasslarni qo'shadi va olib tashlaydi, hodisa (event) ishlovchilarini o'rnatadi va yechadi — ya'ni DOM'ni qadam-baqadam qanday o'zgartirishni imperativ tarzda tasvirlaydi. Ilova kattalashishi bilan bunday kod tez orada holat va razmetkani qo'lda sinxronlash qorishmasiga aylanadi.

Vue boshqacha yondashuvni taklif qiladi:

• Deklarativlik. Dasturchi shablonni (template) holatning aks etishi sifatida tasvirlaydi: {{ count }}, v-if="isVisible", :class="{ active }}". DOM'ni o'zgartiruvchi kod yozish shart emas — ma'lum holatda DOM qanday bo'lishi kerakligini bir marta tasvirlash yetarli.
• Reaktivlik. Komponent ma'lumotlari reaktiv tizimga (ref/reactive) o'raladi. Qiymat o'zgarganda Vue avtomatik ravishda faqat unga bog'liq bo'lgan shablon qismlarini qayta chizadi, bunda virtual DOM va brauzerdagi haqiqiy o'zgarishlarni minimallashtirish uchun samarali solishtirish (diffing) ishlatiladi.
• Komponentli yondashuv. UI mustaqil, qayta ishlatiladigan komponentlarga bo'linadi — har biri o'z razmetkasi, logikasi va uslublarini o'zida jamlaydi. Komponentlar props (yuqoridan pastga) va hodisalar (pastdan yuqoriga) orqali muloqot qiladi.
• Single-File Component (.vue) — bitta joyda muayyan komponentning <template>, <script setup> va <style> qismlari joylashgan fayl. Bu HTML/JS/CSS'ni turli fayllarga tarqatishdan qulayroq va Vue kompilyatoriga har bir qismni optimallashtirish imkonini beradi (masalan, <style scoped>'ni faqat shu komponent bilan cheklash).

Shunday qilib, Vue holat va ko'rinishni sinxronlashni o'z zimmasiga oladi — dasturchi nimani ko'rsatishni tasvirlaydi, har bir o'zgarishda DOM'ni qanday yangilashni emas.

Misol

<!-- Counter.vue -->
<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    Hisoblagich: {{ count }}
  </button>
</template>

<style scoped>
button {
  padding: 8px 16px;
}
</style>

Vanilla JS ekvivalenti bilan solishtiring — bunda elementni qo'lda yaratish, addEventListener o'rnatish va har bir bosishda textContent'ni qo'lda yangilash kerak bo'lardi:

const button = document.createElement('button')
let count = 0
button.textContent = `Hisoblagich: ${count}`
button.addEventListener('click', () => {
  count++
  button.textContent = `Hisoblagich: ${count}` // qo'lda sinxronlash
})
document.body.appendChild(button)

Qo'shimcha savollar

• Virtual DOM nima va u nima uchun kerak?
• Bir fayllik komponent (.vue) shablon satridan foydalanadigan oddiy JS-moduldan nimasi bilan farq qiladi?
• Vue'ga nisbatan "progressiv freymvork" nimani anglatadi?