توجه :‌در صورت بروز هر گونه مشکل و سوال فقط و فقط از طریق تلگرام با ما در ارتباط باشید با تشکر تلگرام پشتیبانی

Vuejs 3 , استفاده از ()ref یا ()reactive

آموزش Vuejs 3

Vue 3 , استفاده از ()ref یا ()reactive

Vuejs 3 , استفاده از ()ref یا ()reactive

توی مقاله قبلی که میتونید از (اینجا) مطالعه کنید یکی از مهمترین تغیرات Vuejs 3 که Composition API بود رو معرفی کردیم و تفاوتشو با Options API متوجه بشید توی این مقاله قراره که راجب ()ref و ()reactive صحبت کنیم و ببینم چجوری کار میکنن.
توی Vuejs 3 البته ref رو توضیح دادم توی ویدئو آموزش Vuejs 3 که میتونید از (اینجا) مشاهده کنید خب حالا بریم باهم برای مقایسه ()ref و ()reactive که چه تفاوت هایی با هم دارند.

()ref یا ()reactive

خب ابتدا عملکرد ()ref رو واستون توضیح میدم:
به نظرم با مثال واستون بگم خیلی بهتره شما فرض کنید ما یه تاس داریم و میخایم آخرین حرکت تاس عدد که می آید رو ذخیره کنیم به اینصورت با ()ref عمل میکنیم:

در اینجا متغیر dice نوعش مقدار عددی یا همون Int هست که مقدار ۰رو بصورت مقدار اولیه و پیش فرض بهش دادیم.
حالا برای این که به reactive تبدلش کنیم من از تابع ()ref استفاده میکنم که مقدار دهی اولیه رو انجام بدم (عکس بالا)
پس در اینصورت الان متغییر dice دیگه مقدارش یک مقدار عددی ساده نیس بلکه یک object هست چرا که از تابع ()ref استفاده کردیم.

;(const dice = ref(0

object
اینجوری که ما عمل کردیم متغییر dice یک آبجکت هست با اتریبیوت value که به این معنیه که اگر شما خواسته باشید به مقدار متغیر dice توی Component تون دسترسی پیدا کنید باید بنویسید ” dice.value ” که توی ویدئو Vuejs 3  هم اینا رو گفتم که توی سایت هست میتونید ببینید.

از ()ref به ()reactive

یه راه دیگه هم واسه reactive کردن متغیرها داریم اونم استفاده از تابع ()reactive هست.
خب اولین تفاوت ()ref از دید برنامه نویس و توسعه دهنده اینه که شما باید تک تک متغیر ها را تعریف کنید،

;(const dice = ref(0
;([])const rolls = ref

و در نهایت وقتی متغیر را به template می فرستید باید آن ها را لیست کنید یا همون آرایه خودمون.

;{ return { dice, rolls, total, roll, restart

با تابع ()reactive دیگه نیازی به این کار نیست و شما باید تمام  متغییر ها رو تو یه ابجکت بیارین.

reactive
با این syntax شما میتونید بجای همه متغیر ها مثل ( dice,roll ) به template فقط آبجکت game رو به template پاس بدین.

تقاوت دیگه اون در کار با متغیرها است که دیگه شما نیازی نیست از کلمه value استفاده کنید ولی یادتون باشه باید مثل ابجکت صدا بزنین برای مثال به function زیر توجه کنید:
فانکشن مثال
خب عزیزان این یه مثال خیلی ساده بود برای تفاوت ()ref و ()reactive امیدوارم که واستون مفید بوده باشه و استفاده کرده باشین.
واسه اینم تو آموزش Vuejs 3 که تو سایتمون هست ویدئو گداشتم تا بهتر کارشو متوجه بشین (برای دیدن ویدئو کلیک کنید) یه تمرین کوچولو رو با هم انجام میدیم تو اون ویدئو پس با ما باشید.
خیلی ممنون که وقت گذاشتید ما رو به دوستان برنامه نویستون معرفی کنید.
همیشه سلامت باشین،‌همیشه بخندین.

مطالب مرتبط
vuejs 3 4 دقیقه

Vuejs 3 و آموزش قابلیت Composition API

سبحان سلیمی

Composition API شاید به جرات میتونم بگم بزرگترین تغییر Vuejs 3 نسبت به برادر بزرگترش (Vue 2) همین Composition API باشه که تو این مقاله قرار مفصل راجبش حرف بزنیم. Composition API چیست؟ فقط برای رفع نگرانی ، این API جدید جایگزین سینتکس قبلی Vue 2.x نشده که API Options نام داره ! حتی می […]

1 دقیقه

آموزش لاراول Laravel گام به گام پروژه محور ۲۰۲۰

سبحان سلیمی

موضوع این مقاله، آموزش لاراول Laravel گام به گام پروژه محور ۲۰۱۹ است. در این مثال، از انواع مختلف ورودی‌ها مانند دکمه‌ی رادیویی، checkbox و select box استفاده کرده‌ایم. عملیات CRUD در لاراول بسیار پراهمیت هستند، در عین حال انواع ورودی‌های بسیار متنوعی دارند. در این مثال، از لاراول با نسخه‌ی ۵.۵ استفاده کرده‌ایم. داده‌ها […]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *