200 سوال مصاحبه ویو جی اس ! بزرگترین لیست سوالات مصاحبه Vue.js !

Teleport یک ویژگی جدید در Vue 3 هست که به ما اجازه می‌ده عناصر DOM رو به جایی خارج از والد اصلی‌ شون منتقل کنیم. این ویژگی برای رندر کردن اجزایی مثل دیالوگ‌ ها یا مدال‌ ها که باید مستقیماً در بالای صفحه ظاهر بشن، خیلی مفیده:

<teleport to=”body”>
<div class=”modal”>این یه مدال هست!</div>
</teleport>

با to="body" مشخص میکنیم که این عنصر به بدنه‌ ی صفحه منتقل بشه.

در Vue 2، هر کامپوننت باید دقیقاً یک عنصر والد داشته باشه، ولی در Vue 3، با استفاده از Fragments می‌تونیم چندین عنصر ریشه‌ ای داشته باشیم، بدون نیاز به یک والد اضافی. این ویژگی باعث می‌شه کد HTML ما تمیزتر و بهینه‌ تر بشه.

Suspense یک کامپوننت جدید در Vue 3 هست که به ما اجازه میده بارگذاری محتوای غیر همزمان رو مدیریت کنیم. این ویژگی برای نمایش یک حالت loading تا وقتی که داده‌ ها به طور کامل بارگیری بشن، خیلی مفیده:

<Suspense>
<template #default>
<MyComponent />
</template>
<template #fallback>
<p>در حال بارگذاری…</p>
</template>
</Suspense>

اینطوری میتونیم تجربه کاربری بهتری برای کاربران فراهم کنیم.

در Vue 3 میتونیم از هر دو  API بصورت ترکیبی استفاده کنیم. یعنی هم میتونیم از روش‌های قدیمی مثل data, methods, و computed استفاده کنیم و هم از setup برای مدیریت منطق واکنش‌ پذیر بهره ببریم. این انعطاف‌ پذیری به ما اجازه میده به تدریج پروژه‌هامون رو به Vue 3 منتقل کنیم.

reactive یک آبجکت واکنش‌ پذیر کامل ایجاد میکنه، در حالی که ref برای متغیرهای ساده به کار میره. مثلاً:

import { reactive, ref } from ‘vue’;

const state = reactive({ count: 0 });
const count = ref(0);

از ref برای مقادیر منفرد و از reactive برای آبجکت‌ های پیچیده استفاده می‌کنیم. ref نیاز به دسترسی به مقدار با .value داره، اما reactive به طور مستقیم کار می‌ کنه.

 Provide و Inject به ما اجازه میدن داده‌ ها رو بین کامپوننت‌ ها بدون استفاده از props یا Vuex به اشتراک بذاریم. provide داده‌ ها رو در یک کامپوننت والد فراهم می‌کنه و inject اون داده‌ ها رو در کامپوننت‌ های فرزند دریافت میکنه. این روش برای مدیریت وابستگی‌ های عمیق و پیچیده مفیده:

// والد
provide() {
return { message: ‘سلام از والد!’ };
}

// فرزند
inject: [‘message’]

shallowRef و shallowReactive برای ایجاد آبجکت‌ های واکنش‌ پذیر به کار میرن که فقط سطح بالای داده‌ ها رو ردیابی می‌کنن. این یعنی تغییرات در مقادیر داخلی، واکنش‌ پذیری رو فعال نمی‌کنه. این ویژگی‌ ها برای بهینه کردن عملکرد پروژه مفیده.

 Vue Router Guards برای کنترل دسترسی به مسیرها استفاده میشه. به عنوان مثال، می‌تونیم بررسی کنیم که آیا کاربر لاگین کرده یا نه، و در صورت عدم دسترسی، به مسیر دیگه‌ ای هدایتش کنیم:

router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next(‘/login’);
} else {
next();
}
});

این کار امنیت و مدیریت دسترسی رو در اپلیکیشن راحت‌ تر می‌کنه.

میتونیم از کتابخونه‌ هایی مثل VeeValidate یا Yup برای اعتبارسنجی فرم‌ها استفاده کنیم. یا می‌تونیم متدهای سفارشی بنویسیم و داده‌ها رو قبل از ارسال بررسی کنیم. مثال:

validateForm() {
if (!this.name) {
this.errors.push(‘اسم لازمه!’);
}
}

اینطوری می‌تونیم خطا های فرم رو مدیریت کنیم.

Scoped CSS به ما اجازه میده که استایل‌ های ما فقط روی کامپوننت مربوطه اثر بذارن و به بقیه کامپوننت‌ ها نفوذ نکنن. برای این کار از ویژگی scoped استفاده می‌کنیم:

<style scoped>
.my-class {
color: red;
}
</style>

این کار باعث میشه که تداخل استایل‌ ها بین کامپوننت‌ ها به حداقل برسه.

برای فراخوانی متدهای والد از فرزند، معمولاً از this.$emit برای ارسال یک event به والد استفاده میکنیم. والد این event رو گوش میده و متد مربوطه رو اجرا میکنه:

<!– در والد –>
<MyComponent @customEvent=”myMethod” />

<!– در فرزند –>
this.$emit(‘customEvent’);

 Event Bus یک شی ساده Vue هست که برای انتقال داده‌ها یا event‌ها بین کامپوننت‌ های غیرمرتبط استفاده میشه. برای ساخت Event Bus:

const EventBus = new Vue();

و بعد میتونیم از EventBus.$emit() و EventBus.$on() برای ارسال و گوش دادن به event‌ها استفاده کنیم. با این حال، در پروژه‌ های بزرگ بهتره از Vuex یا Composition API استفاده کنیم.

برای ساختن یه Modal سفارشی، می‌تونیم از کامپوننت‌ های قابل استفاده مجدد استفاده کنیم. معمولاً از v-if برای کنترل نمایش و از teleport برای انتقال به body استفاده می‌کنیم:

<teleport to=”body”>
<div v-if=”showModal” class=”modal”>محتوای مدال</div>
</teleport>

اینطوری کنترل بیشتری روی نمایش و انتقال مدال داریم.

برای تست پروژه‌های Vue.js می‌تونیم از ابزارهایی مثل Jest برای تست واحد (unit tests) و Cypress برای تست‌ های end-to-end استفاده کنیم. این ابزارها کمک می‌کنن تا مطمئن بشیم کامپوننت‌ ها درست کار می‌کنن و تعاملات کاربر بدون مشکل هستن.

watchEffect یکی از ویژگی‌ های Composition API در Vue 3 هست که به طور خودکار وابستگی‌ ها رو دنبال می‌کنه و وقتی داده‌ها تغییر میکنن، اثر (effect) رو دوباره اجرا می‌کنه. این ابزار برای کار هایی مثل بروزرسانی UI یا اجرای کدهای واکنش‌ پذیر خیلی مفیده:

import { watchEffect } from ‘vue’;

watchEffect(() => {
console.log(state.value);
});

در Composition API، میتونیم از متدهای onMounted, onUnmounted, onUpdated و دیگر hooks برای مدیریت مراحل مختلف زندگی کامپوننت استفاده کنیم. این متدها به ما اجازه میدن کدی رو در زمان مناسب اجرا کنیم:

import { onMounted } from ‘vue’;

onMounted(() => {
console.log(‘کامپوننت لود شد!’);
});

Vue 3 Migration Build یک نسخه خاص از Vue 3 هست که به توسعه‌ دهندگان کمک میکنه پروژه‌های Vue 2 خودشون رو به Vue 3 به تدریج انتقال بدن. این ابزار هشدارهایی رو درباره تغییرات ناسازگار نشون میده و به رفع اون‌ها کمک میکنه.

v-bind برای بایند کردن ویژگی‌ های HTML به داده‌های Vue استفاده میشه. میتونیم ازش برای یک ویژگی خاص یا برای بایند کردن چندین ویژگی به صورت آبجکت استفاده کنیم:

<img v-bind:src=”imageUrl” :alt=”imageAlt” />
<!– یا به این شکل –>
<div v-bind=”objectOfAttributes”></div>

این کار مدیریت ویژگی‌ها رو راحت‌ تر میکنه.

v-on برای گوش دادن به رویدادها استفاده میشه و می‌تونیم از شورتکات @ هم استفاده کنیم. همچنین میتونیم modifiers مثل .prevent یا .stop برای کنترل بهتر رویدادها اضافه کنیم:

<button @click.prevent=”myMethod”>کلیک کن</button>

اینطوری از رفتار پیش‌ فرض جلوگیری میکنیم.

 Vue.js یک فریمورک قدرتمند با جامعه کاربری بزرگ و ویژگی‌ هایی مثل Virtual DOM، کامپوننت‌ ها و سیستم واکنش‌پذیریه. Svelte اما به جای استفاده از Virtual DOM، در زمان کامپایل کد بهینه تولید می‌کنه. این باعث می‌شه Svelte سریع‌ تر و سبک‌ تر باشه، ولی Vue.js ابزارها و اکوسیستم گسترده‌ تری داره.