Vue3 da ( ref va reactive) farqi

Vue3-daref va reactive hook-larini tanlashda qaysi biri qulayroq ekanligini aniqlashda, ularning farqlarini va qanday holatlarda foydalanishni tushunish kerak . Har ikkala hook ham reaktiv ma’lumotlar yaratish uchun ishlatiladi, lekin ularning ishlash …


This content originally appeared on DEV Community and was authored by Mukhriddin Khodiev (work)

Vue3-daref va reactive hook-larini tanlashda qaysi biri qulayroq ekanligini aniqlashda, ularning farqlarini va qanday holatlarda foydalanishni tushunish kerak . Har ikkala hook ham reaktiv ma'lumotlar yaratish uchun ishlatiladi, lekin ularning ishlash usuli va qo'llanilishi jichcha farq qiladi.

ref

Qulayliklari

  1. Oddiy qiymatlar uchun mos: ref asosan primitive turlar (string, number, boolean) uchun qulay. Masalan, count, message kabi oddiy qiymatlar uchun.

  2. DOM elementlariga murojaat qilish: ref DOM elementlarini saqlash va ularga murojaat qilish uchun ishlatiladi. Masalan, <div ref="myDiv"></div>.

  3. Qiymatga kirish oson: ref bilan ishlashda, .value orqali qiymatga kirish va uni o'zgartirish mumkin.

Misol 

import { ref } from 'vue';

const count = ref(0);
count.value++; // Qiymatni oshirish

reactive

Qulayliklari

  1. Murakkab ma'lumot tuzilmalari uchun mos: reactive object yoki array kabi murakkab tuzilmalarga ega bo'lgan ma'lumotlar uchun qulay. U butun ob'ekt yoki massivni reactive (reaktiv) qiladi.
  2. Objectlar bilan ishlash: reactive objectning barcha xususiyatlarini reaktiv qiladi, shuning uchun to'g'ridan-to'g'ri xususiyatlarga kirish va ularni o'zgartirish mumkin.

Misol 

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});
state.count++; // Qiymatni oshirish
state.name = 'Vue 3'; // Xususiyatni o'zgartirish

ref va reactive farqlari

  1. Qiymat turi:

    • ref oddiy qiymatlar uchun mos va .value orqali ularga kiriladi.
    • reactive complex holatga ega object yoki array uchun mos va to'g'ridan-to'g'ri xususiyatlarga kiriladi.

  2. Qo'llanilish holatlari:

    • ref primitive turlar (string, number, boolean) va DOM elementlari uchun ishlatiladi.
    • reactive object yoki array kabi murakkab tuzilmalar uchun ishlatiladi.

  3. Reaktivlik:

    • ref faqat bitta qiymatni reaktiv qiladi.
    • reactive butun bir object yoki array ni reaktiv qiladi, shu jumladan uning barcha xususiyatlarini.

Tanlash qachon qulay

  • Agar sizda oddiy qiymat bo'lsa yoki DOM elementiga murojaat qilish kerak bo'lsa, ref dan foydalaning.
  • Agar sizda ko'p xususiyatlarga ega bo'lgan object yoki array bo'lsa, reactive dan foydalaning.

Umumiy misol

Quyida ref va reactive ni birgalikda qo'llash misoli keltirilgan:

<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Todos:</p>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
    <input v-model="newTodoText" placeholder="New todo" />
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const message = ref('Hello, Vue 3!');
const todos = reactive([
  { id: 1, text: 'Learn Vue 3' },
  { id: 2, text: 'Build something awesome' }
]);
const newTodoText = ref('');

function addTodo() {
  todos.push({ id: todos.length + 1, text: newTodoText.value });
  newTodoText.value = '';
}
</script>

Ushbu misol ref va reactive hook-larini qanday birgalikda ishlatish mumkinligini ko'rsatadi. Tanlov qaysi turdagi ma'lumotlar bilan ishlayotganingizga bog'liq bo'ladi.

Image description

PS: Yuqridagi rasmda nega bunday demoqda , 🤔🤔🫢🫢🙄🙄🙄😩😫😫 , video darsda javob berib o'taman bu haiqda :)

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

🔗 https://t.me/mukhriddinweb
🔗 https://medium.com/@mukhriddinweb
🔗 https://dev.to/mukhriddinweb
🔗 https://khodieff.uz
🔗 https://github.com/mukhriddin-dev
🔗 https://linkedin.com/in/mukhriddin-khodiev
🔗 https://youtube.com/@mukhriddinweb


This content originally appeared on DEV Community and was authored by Mukhriddin Khodiev (work)


Print Share Comment Cite Upload Translate Updates
APA

Mukhriddin Khodiev (work) | Sciencx (2024-07-08T00:53:30+00:00) Vue3 da ( ref va reactive) farqi. Retrieved from https://www.scien.cx/2024/07/08/vue3-da-ref-va-reactive-farqi/

MLA
" » Vue3 da ( ref va reactive) farqi." Mukhriddin Khodiev (work) | Sciencx - Monday July 8, 2024, https://www.scien.cx/2024/07/08/vue3-da-ref-va-reactive-farqi/
HARVARD
Mukhriddin Khodiev (work) | Sciencx Monday July 8, 2024 » Vue3 da ( ref va reactive) farqi., viewed ,<https://www.scien.cx/2024/07/08/vue3-da-ref-va-reactive-farqi/>
VANCOUVER
Mukhriddin Khodiev (work) | Sciencx - » Vue3 da ( ref va reactive) farqi. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/08/vue3-da-ref-va-reactive-farqi/
CHICAGO
" » Vue3 da ( ref va reactive) farqi." Mukhriddin Khodiev (work) | Sciencx - Accessed . https://www.scien.cx/2024/07/08/vue3-da-ref-va-reactive-farqi/
IEEE
" » Vue3 da ( ref va reactive) farqi." Mukhriddin Khodiev (work) | Sciencx [Online]. Available: https://www.scien.cx/2024/07/08/vue3-da-ref-va-reactive-farqi/. [Accessed: ]
rf:citation
» Vue3 da ( ref va reactive) farqi | Mukhriddin Khodiev (work) | Sciencx | https://www.scien.cx/2024/07/08/vue3-da-ref-va-reactive-farqi/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts