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

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

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

زبان اسمبلی چیست؟ آموزش اسمبلی به زبان ساده

سبحان سلیمی

زبان اسمبلی یک زبان برنامه‌نویسی سطح پایین (Low-level Programming Language) است که دستوراتش معادل کدهای ماشین (Machine Code) هستند. به عبارت دیگر، مجموعه‌ای از دستورات باینری (Binary) که مقادیری را به داخل رجیسترهای CPU (یا ریزپردازنده‌های دیگر) می‌ریزند یا از آن برمی‌دارند. مقدمه یک ریزپردازنده، یک ماشین حساب مکانیکی است. یک ریزپردازنده تعدادی رجیستر (Register) […]

devgym.ir 4 دقیقه

توسعه‌دهندگان چه می‌کنند و چقدر درآمد دارند؟ | Stack Overflow

سبحان سلیمی

سایت Stack Overflow در نظرسنجی سالانه‌اش سعی کرده تا ترندهای برنامه‌نویسی جهان را شناسایی کند. در بخش سوم به این می‌پردازیم که توسعه‌دهندگان چطور کار می‌کنند. بخش دوم دربارهٔ زبان‌ها و فناوری‌های مورد استفادهٔ توسعه‌دهندگان و میزان مصرف کافئین آنها بود، و بخش اول به این می‌پرداخت که اساسا توسعه‌دهنده چطور آدمی است. برای کسانی […]

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

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