Vue3 da ( ref va reactive) farqi

یک مثال

import { ref } from 'vue';

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

reactive

امکانات رفاهی

1. مناسب برای ساختارهای داده پیچیده: reactive برای داده هایی با ساختارهای پیچیده مانند شی یا آرایه مفید است. کل شی یا آرایه را واکنشی می کند.
2. کار با اشیا: reactive تمام خصوصیات شی را فعال می کند، بنابراین می توان به خصوصیات مستقیماً دسترسی پیدا کرد و تغییر داد.

یک مثال

import { reactive } from 'vue';

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

ref وا reactive تفاوت

1. نوع ارزش:

   • ref مناسب برای مقادیر معمولی و .value از طریق آنها قابل دسترسی است
   • reactive برای یک شی یا آرایه با حالت پیچیده مناسب است و مستقیماً به خصوصیات دسترسی دارد.

2. موارد استفاده:

   • ref برای انواع اولیه (رشته، عدد، بولی) و عناصر DOM استفاده می شود.
   • reactive برای ساختارهای پیچیده مانند شی یا آرایه استفاده می شود.

3. واکنش پذیری:

   • ref فقط یک مقدار را فعال می کند.
   • reactive کل یک شی یا آرایه را فعال می کند، از جمله تمام ویژگی های آن.

وقتی راحت است انتخاب کنید

• اگر مقدار ساده ای دارید یا باید به یک عنصر DOM مراجعه کنید، ref استفاده کنید.
• اگر یک شی یا آرایه با خواص زیاد دارید، reactive استفاده کنید.

یک مثال رایج

در زیر ref وا reactive در اینجا مثالی از استفاده با هم آورده شده است:

template>
  
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>

این مثال ref وا reactive نشان می دهد که چگونه قلاب ها را می توان با هم استفاده کرد. انتخاب بستگی به نوع داده ای دارد که با آن کار می کنید.

پ.ن: چرا تو عکس بالا میگه 🤔🤔🫢🫢🙄🙄🙄😩😫😫، در درس تصویری به این جواب میدم 🙂

می توانید ما را در شبکه ها دنبال کنید و در صورت مفید بودن مطلب آن را با دوستان خود به اشتراک بگذارید. 🫡

🔗 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