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

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 که تو سایتمون هست ویدئو گداشتم تا بهتر کارشو متوجه بشین (برای دیدن ویدئو کلیک کنید) یه تمرین کوچولو رو با هم انجام میدیم تو اون ویدئو پس با ما باشید.
خیلی ممنون که وقت گذاشتید ما رو به دوستان برنامه نویستون معرفی کنید.
همیشه سلامت باشین،‌همیشه بخندین.

مطالب مرتبط
1 دقیقه

مزایا و معایب ۸ Angular

سبحان سلیمی

مزایا و ویژگی‌های Angular 8 انگولار ۸ مزایایی دارد که در ادامه عنوان می­شوند: نوشتن کد در آن ساده است. سرعت بالا فریمورک انگولار روتینگ (Routing) را مدیریت می­‌کند. در این صورت رفتن از یک view به view دیگر در انگولار ساده است. آپدیت­های بدون ­وقفه با استفاده از Angular CLI (واسط دستوری) امکان گرفتن […]

5 دقیقه

استارتاپ یونیکورن چیست؟ | آیا در ایران استارتاپ یونیکورن داریم؟

سبحان سلیمی

اصطلاح یونیکورن اولین بار در سال ۲۰۱۳ توسط آیلین لی استفاده شد و به شرکت‌هایی که بعد از سال ۲۰۰۳ ایجادشده‌اند و ارزش فعلی آن‌ها بیش از یک میلیارد دلار است، گفته می‌شود. در معنی لغوی واژه یونیکورن به معنای اسب تک‌شاخ است. تک‌شاخ‌ها موجودات افسانه‌ای هستند که یک‌شاخ در سرشان دارند.   اصطلاح یونیکورن […]

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

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