Vue.js-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
import { ref } from 'vue';
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
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
-
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:
<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.
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://medium.com/@mukhriddinweb
🔗 https://dev.to/mukhriddinweb
🔗 https://github.com/mukhriddin-dev
Ulashish: