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
Oddiy qiymatlar uchun mos: ref asosan primitive turlar (string, number, boolean) uchun qulay. Masalan, count, message kabi oddiy qiymatlar uchun.
DOM elementlariga murojaat qilish: ref DOM elementlarini saqlash va ularga murojaat qilish uchun ishlatiladi. Masalan, <div ref=”myDiv”></div>.
Qiymatga kirish oson: ref bilan ishlashda, .value orqali qiymatga kirish va uni o’zgartirish mumkin.
Misol
const count = ref(0);
count.value++; // Qiymatni oshirish
reactive
Qulayliklari
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.
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
const state = reactive({
count: 0,
name: ‘Vue‘
});
state.count++; // Qiymatni oshirish
state.name = ‘Vue 3‘; // Xususiyatni o’zgartirish
ref va reactive farqlari
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.
Qo’llanilish holatlari:
ref primitive turlar (string, number, boolean) va DOM elementlari uchun ishlatiladi.
reactive object yoki array kabi murakkab tuzilmalar uchun ishlatiladi.
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:
<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.
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
