قوانین کد نویسی Vue js که باید با احتیاط استفاده شوند

قوانین کد نویسی Vue js که باید با احتیاط استفاده شوند

در بخش قبلی با قوانینی که توصیه می شد رعایت شوند، آشنا شدید. در این بخش قصد داریم شما را با قوانینی که بهتر است رعایت شوند، آشنا کنیم.

در این مقاله قوانین درجه D معرفی می شوند. 

قوانینی که بهتر است رعایت کنید D (الگوهای بالقوه خطرناک)

1- v-if / v-else-if / v-else بدون key

اگر دو المانی که در آن ها از v-if و v-else استفاده می شود، مشابه باشد (برای مثال هر دو <div> باشند) معمولاً بهتر است از key نیز به عنوان attribute استفاده شود. 

به طور پیش فرض، Vue تا حد ممکن DOM را به خوبی به روز رسانی می کند. این بدان معناست که هنگام تعویض بین المان های یک نوع، به سادگی المان موجود (المانی که شرط آن صحیح است) را به DOM اضافه می کند نه اینکه ابتدا المان اولیه را حذف کرده و سپس یک المان جدید به جای آن قرار دهد. اگر این عناصر به صورت یکسان تلقی شوند، ممکن است مشکلات ناخواسته ای را به وجود آورد. برای مثال با دقت به کد های نوشته شده در مثال اول و دوم متوجه خواهید شد که وجود key در چنین مواقعی چقدر می تواند مفید باشد.

 bad v-if v-else-if v-else without key
good v-if/v-else-if/v-else without key

2- انتخاب کننده های المان (Element selectors) با scoped 

در انتخاب کننده های المان (برای مثال یک button) نباید از scoped استفاده کرد.

در استفاده از scoped در نوشتن styleها، انتخاب کننده های class اولویت بالاتری نسبت به المان دارند زیرا تعداد زیاد انتخاب کننده های المان باعث کندی فرایند اعمال style به المان می شود.

نکته: در styleهای scope ، فریمورک Vue یک attribute یکتا برای مثال data-v-f3f3eg9 را به المان های کامپوننت اضافه می کند. سپس انتخاب کننده ها فقط المانی را که دارای این attribute باشد (برای مثال button[data-v-f3f3eg9]) را انتخاب می کنند.

این موضوع زمانی مشکل ساز می شود که این attribute یکتا به المان های زیادی متصل شوند (برای مثال در button[data-v-f3f3eg9])، در این صورت پیدا کردن المان مورد نظر بین تعداد زیادی button کاری زمانبر خواهد بود و به مراتب آهسته تر از انتخاب کننده های class (برای مثال .btn-close[data-v-f3f3eg9]) انجام خواهد شد. بنابراین، در صورت امکان باید انتخاب کننده های class به جای انتخاب کننده های المان استفاده کرد.

 bad element selectors with scoped
good element selectors with scoped

3- ارتباط ضمنی والدین (parent) و  فرزندان (child)

در ارتباط ضمنی والد و فرزند، باید prop ها و event ها به جای this.$parent یا prop های جهش یافته (استفاده از v-model درون کامپوننت child برای تغییر مقدار prop) قرار بگیرند.

bad implicit parent-child communication
good implicit parent-child communication

قوانین این بخش هم به پایان رسید و این فصل از دوره آموزشی Vue js نیز در اینجا به پایان می رسد. امیدوارم از این فصل بهره کافی را برده باشید و آمادگی کامل برای شروع فصل بعد، جهت بررسی سایر قابلیت های فریمورک Vue js، را داشته باشید.

منبع:

/https://vuejs.org/v2/style-guide

دوره در دست تالیف است ... rocket
نظرات
اگر login نکردی برامون ایمیلت رو بنویس: