DEV Community

Cover image for Vue.js da reaktivlik (reactivity)
Mukhriddin Khodiev (work)
Mukhriddin Khodiev (work)

Posted on • Edited on

1

Vue.js da reaktivlik (reactivity)

Vue3 da reaktivlik (reactivity) asosiy qismlardan biri hisoblanadi, bu dastur yoki saytimizning dinamikligini va interaktivligini ta’minlash uchun ishlatiladi. Vue3 da reaktivlik Vue'ning Composition API (versiyasi) orqali amalga oshiriladi. Bu "Composition API" (v3) Vue 2 dagi "Options API" bilan solishtirganda ancha tartibli ishlash va qulaylikni beradi.

Vue3 da reaktivlikning asosiy tushunchalari

  1. reactive:
    • reactive funksiyasi obyektlarni reaktiv holatga keltiradi. Bu shuni anglatadiki, obyektning har qanday o‘zgarishi avtomatik ravishda interfeysni yangilaydi.
   import { reactive } from 'vue';

   const state = reactive({
     count: 0
   });

   function increment() {
     state.count++;
   }
Enter fullscreen mode Exit fullscreen mode
  1. ref:
    • ref funksiyasi oddiy qiymatlarni reaktiv holatga keltiradi. Bu oddiy statik saqlangan qiymatlarni, masalan, number yoki string array kabi datalarni reaktiv qilish uchun ishlatiladi.
   import { ref } from 'vue';

   const count = ref(0);

   function increment() {
     count.value++;
   }
Enter fullscreen mode Exit fullscreen mode
  1. computed:
    • computed funksiya qaytaradigan qiymatlar uchun ishlatiladi. Ular boshqa reaktiv qiymatlarga bog‘liq bo‘lib, bog‘liq qiymatlar o‘zgarganda avtomatik ravishda qayta "render"lanadi.
   import { computed, ref } from 'vue';

   const count = ref(0);
   const double = computed(() => count.value * 2);
Enter fullscreen mode Exit fullscreen mode
  1. watch:
    • watch funksiyasi reaktiv qiymatlar o‘zgarishlarini kuzatish uchun ishlatiladi. Bu biror o‘zgarish sodir bo‘lganda o'zgarishni "handle" qilishga yordam beradi.
   import { watch, ref } from 'vue';

   const count = ref(0);

   watch(count, (newValue, oldValue) => {
     console.log(`Count changed from ${oldValue} to ${newValue}`);
   });
Enter fullscreen mode Exit fullscreen mode

Vue3 da reaktivlikning afzalliklari nimada ?

  • Optimallik va samaradorlik: Vue 3 da reaktivlik tizimi asosan Proxy asosida amalga oshirilgan bo‘lib, u Vue 2 dagi Object.defineProperty asosidagi yondashuvdan ko‘ra samarali hisoblanadi.

  • Moslashuvchanlik (flexibility) : Composition API Vue 3 da muhim bo‘lib, komponentlarning qayta foydalanish darajasini oshiradi va murakkabliklarni kamatiradi.

  • Modulizatsiya: Composition API ko‘p funksionallikni alohida modullarga ajratishga yordam beradi, bu kodni yanada o‘qishli va boshqarish oson bo‘lishiga olib keladi.

Vue3 da reaktivlik tizimi Vue da loyihalar ishlab chiqishda kuchli va oson desak bo'ladi , interaktiv va dinamik foydalanuvchi interfeyslarini (UI) ni yaratishda katta yordam beradi.

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more