
اگر یادتان باشد در قسمت قبل در مورد مدیریت یک property در data صحبت کردیم و اینکه اگر چندین متد مختلف به آن دسترسی داشته باشند، همگام نگه داشتن تمام این متدها با یکدیگر بسیار سخت است. در نهایت به عنوان راه حل دست به دامان Vue شدیم و کد زیر را به شما دادم:
new Vue({ el: '#app', data: { counter: 0, result: '' } })
کدهای HTML نیز به شکل زیر بودند:
<div id="app"> <button v-on:click="counter++">Increase</button> <button v-on:click="counter--">Decrease</button> <p>Counter: {{ counter }}</p> <p>Result: {{ result }}</p> </div>
سوالی که در جلسه قبل نیز پرسیده شد اینجاست که چطور result را به روز رسانی کنیم؟ در حال حاضر می توانیم مقدار counter را زیاد یا کم کنیم اما چطور باید result را تغییر دهیم. اولین اشتباه افراد تازه کار نوشتن کدهای result درون خود result است. مثلا کدی شبیه به کد زیر:
data: { counter: 0, result: this.counter > 5 ? // بقیه کدها }
همیشه به یاد داشته باشید که data واکنش پذیر نیست یعنی اگر درون آن کدی را تایپ کنید، کدها را اجرا نخواهد کرد. Data فقط محل ذخیره و نگهداری داده ها می باشد. روش بهتر و صحیح استفاده از همان روشی است که شبیه به آن را در جلسه قبل داشتیم؛ استفاده از methods:
new Vue({ el: '#app', data: { counter: 0 }, methods: { result () { return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } } })
یعنی ابتدا خصوصیت result را حذف کرده ام و سپس تابعی به نام result را نوشته ام.
حالا در قسمت HTML باید به جای خصوصیت result، تابع result را صدا بزنیم:
<div id="app"> <button v-on:click="counter++">Increase</button> <button v-on:click="counter--">Decrease</button> <p>Counter: {{ counter }}</p> <p>Result: {{ result() }}</p> </div>
همانطور که می بینید این روش، شبیه به روش جلسه قبل است اما دیگر نیازی به همگام سازی متد ها و داشتن یک خصوصیت جداگانه به نام results نداریم. این روش برای پروژه های کوچک آنقدر ها هم بد نیست اما مشکلات خودش را نیز دارد. مثلا اگر یک counter دیگر را به کدهایمان اضافه کنیم چه می شود؟
<div id="app"> <button v-on:click="counter++">Increase</button> <button v-on:click="counter--">Decrease</button> <button v-on:click="secondCounter++">Increase Second</button> <p>Counter: {{ counter }}</p> <p>Result: {{ result() }}</p> </div>
حالا من خصوصیت secondCounter را درون کدهای جاوا اسکریپت نیز اضافه می کنیم:
data: { counter: 0, secondCounter: 0 },
در فریم ورک Vue تابع result با هر بار به روز رسانی صفحه، دوباره اجرا می شود. از طرفی هر زمانی که یکی از خصوصیات data تغییر کند، Vue صفحه را به روز رسانی می کند بنابراین با تغییر counter یا secondCounter صفحه به روز رسانی شده و result دوباره اجرا می شود. Vue متوجه نمی شود و برایش مهم نیست که آیا خصوصیات تغییر کرده data درون result هستند یا خیر. بنابراین با زیاد شدن secondCounter تابع result دوباره اجرا می شود با اینکه در عمل در صفحه تغییری اتفاق نمی افتد (secondCounter را در هیچ قسمتی از صفحه نمایش نمی دهیم).
شاید چنین چیزی برای یک برنامه ساده مشکلی به وجود نیاورد اما اگر برنامه ای بزرگ و واقعی داشته باشیم که توابع آن بسیار طولانی هستند و همه چیز به هم متصل شده چطور؟ Vue این مشکل را به روش خودش حل می کند. خصوصیت جدیدی به نام computed (به معنی «محاسبه شده»):
new Vue({ el: '#app', data: { counter: 0, secondCounter: 0 }, computed: { }, methods: { result () { return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } } })
همانطور که می بینید computed هم یک شیء ساده است (محل ذخیره وابستگی ها). این شیء دقیقا مانند data به ما اجازه می دهد که خصوصیات و داده های خودمان را در آن ذخیره کنیم اما تفاوتش با data این است که داده ها را مستقیما ذخیره نمی کند بلکه تابعی است که مقدار نهایی خصوصیت خودمان را با آن برمی گردانیم:
new Vue({ el: '#app', data: { counter: 0, secondCounter: 0 }, computed: { output: function () { return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } }, methods: { result: function () { return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } } })
در نگاه اول output دقیقا همان result است اما با هم تفاوت دارند. من هر دو را با روش ES5 نوشته ام که تصور نکنید نحوه تعریف این دو تابع، تفاوت اصلی آن ها است. تفاوت اصلی در نحوه صدا زدن و اجرا شدن آن ها است. اگر من بخواهم output را صدا بزنم می گویم:
<div id="app"> <button v-on:click="counter++">Increase</button> <button v-on:click="counter--">Decrease</button> <button v-on:click="secondCounter++">Increase Second</button> <p>Counter: {{ counter }}</p> <p>Result: {{ result() }} | {{ output }}</p> </div>
با اینکه output یک تابع است اما من برایش پرانتز نگذاشته ام و مانند یک خصوصیت ساده در data صدایش زده ام. بنابراین می توان گفت: ما می توانیم هر چیزی که در computed باشد را به همان شکلی استفاده کنیم که از مقادیر درون data استفاده می کردیم. نکته مهم و تفاوت اصلی این دو اینجاست که result هر بار اجرا می شود (قبلا توضیح دادم چرا این اتفاق می افتد) اما Vue متوجه می شود که خصوصیت های درون computed کدام خصوصیت ها هستند. بنابراین Vue بررسی می کند که آیا secondCounter درون computed استفاده شده است؟ اگر مانند کد بالا استفاده نشده است نیازی به اجرای دوباره output در هنگام تغییر مقدار secondCounter نیست. یعنی اگر دکمه increase Second را بزنیم output اجرا نمی شود. چطور می توان چنین چیزی را اثبات کرد؟ با یک دستور log ساده!
در ابتدا باید برای هر دو تابع Result و output یک دستور log ساده بنویسیم:
new Vue({ el: '#app', data: { counter: 0, secondCounter: 0 }, computed: { output: function () { console.log('Computed'); return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } }, methods: { result: function () { console.log('Method'); return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'; } } })
سپس درون کدهای HTML از secondCounter نیز استفاده می کنیم تا تغییرات آن را ببینیم:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <button v-on:click="counter++">Increase</button> <button v-on:click="counter--">Decrease</button> <button v-on:click="secondCounter++">Increase Second</button> <p>Counter: {{ counter }} | {{ secondCounter}}</p> <p>Result: {{ result() }} | {{ output }}</p> </div>
کدهای بالا را اجرا کرده و console مرورگر خود را باز کنید. در ابتدا یک بار روی دکمه increase کلیک کنید. با این کار یک بار Method و یک بار Computed در کنسول مرورگر چاپ می شوند. چرا؟ به دلیل اینکه counter درون هر دوی این توابع استفاده شده است. حالا یک بار دکمه increase second را بزنید. با این کار فقط عبارت Method را در کنسول مرورگر مشاهده می کنیم و خبری از Computed نیست.
بنابراین اگر درون متد های خودتان وابستگی های مختلفی دارید حتما باید از computed استفاده نمایید اما اگر مطمئن هستید که قصد کش کردن نتیجه را ندارید و می خواهید هر بار نتیجه دوباره محاسبه شود، از روش methods استفاده نمایید.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI