کامپوننت‌ها
کامپوننت‌ها در ویو جی‌اس (Vue.js) بلوک‌های مستقل و قابل استفاده مجددی هستند که شامل template، logic و style می‌شوند. استفاده از کامپوننت‌ها باعث می‌شود کد شما سازمان‌دهی شده، قابل نگهداری و مقیاس‌پذیر باشد. هر زمان که بخواهید یک بخش UI را چندین بار استفاده کنید یا آن را به صورت داینامیک رندر کنید، کامپوننت‌ها بهترین گزینه هستند.
در توسعه ویو جی‌اس، مفاهیم کلیدی شامل Props برای ارسال داده از والد به فرزند، Emits برای ارسال رویدادها از فرزند به والد، reactive state برای مدیریت داده‌ها، computed properties برای داده‌های مشتق شده و lifecycle hooks برای کنترل رفتار کامپوننت در طول عمر آن هستند. در سطح پیشرفته‌تر، می‌توان از الگوریتم‌ها و اصول OOP مانند مرتب‌سازی، فیلترینگ و پردازش کارآمد داده‌ها در کامپوننت‌ها استفاده کرد.
در این آموزش شما یاد می‌گیرید که چگونه کامپوننت‌ها را تعریف و ثبت کنید، مدیریت Props و Events را انجام دهید، از dynamic components و slots استفاده کنید و از مشکلات رایج مانند memory leak، خطاهای نادرست و الگوریتم‌های ناکارآمد جلوگیری کنید. درک عمیق کامپوننت‌ها شما را قادر می‌سازد برنامه‌های بزرگ و پیشرفته ویو جی‌اس بسازید و معماری سیستم را بهینه کنید.
مثال پایه <template>
text<div id="app">
<UserCard :user="userInfo" @greet="handleGreet"/>
</div>
</template>
<script>
import { defineComponent, reactive } from 'vue';
const UserCard = defineComponent({
name: 'UserCard',
props: {
user: { type: Object, required: true }
},
emits: ['greet'],
setup(props, { emit }) {
const greetUser = () => {
emit('greet', `سلام ${props.user.name}!`);
};
return { greetUser };
},
template: `
<div class="user-card">
<h2>{{ user.name }}</h2>
<p>{{ user.role }}</p>
<button @click="greetUser">سلام</button>
</div>`
});
export default defineComponent({
name: 'App',
components: { UserCard },
setup() {
const userInfo = reactive({ name: 'علی', role: 'توسعه‌دهنده' });
const handleGreet = message => {
console.log(message);
};
return { userInfo, handleGreet };
}
});
</script>
<style scoped>
.user-card {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
</style>در این مثال، UserCard یک کامپوننت است که از Props و Emits استفاده می‌کند. Props داده‌ها را از والد دریافت می‌کند و Emits رویدادها را به والد ارسال می‌کند. تابع setup شامل متد greetUser است که رویداد را trigger می‌کند. کامپوننت App از reactive state استفاده می‌کند و رویداد greet را مدیریت می‌کند. این نمونه نشان‌دهنده جریان داده قابل پیش‌بینی، encapsulation و استفاده از Composition API است. چنین الگویی برای UIهای تعاملی مانند کارت‌ها، لیست کاربران و اعلان‌ها کاربرد مستقیم دارد.
مثال کاربردی <template>
text<div id="app">
<UserList :users="userList" @userSelect="handleSelect"/>
</div>
</template>
<script>
import { defineComponent, reactive, computed } from 'vue';
const UserList = defineComponent({
name: 'UserList',
props: { users: { type: Array, required: true } },
emits: ['userSelect'],
setup(props, { emit }) {
const sortedUsers = computed(() => {
return [...props.users].sort((a, b) => a.name.localeCompare(b.name));
});
const selectUser = user => {
if (!user) throw new Error('کاربر نامعتبر انتخاب شد');
emit('userSelect', user);
};
return { sortedUsers, selectUser };
},
template: `
<ul>
<li v-for="user in sortedUsers" :key="user.id" @click="selectUser(user)">
{{ user.name }} - {{ user.role }}
</li>
</ul>`
});
export default defineComponent({
name: 'App',
components: { UserList },
setup() {
const userList = reactive([
{ id: 1, name: 'علی', role: 'توسعه‌دهنده' },
{ id: 2, name: 'سارا', role: 'طراح' },
{ id: 3, name: 'حسین', role: 'مدیر' }
]);
const handleSelect = user => {
console.log('کاربر انتخاب شده:', user);
};
return { userList, handleSelect };
}
});
</script>در این مثال پیشرفته، کامپوننت‌ها شامل الگوریتم‌ها و اصول OOP هستند. computed property sortedUsers بدون تغییر Props، لیست کاربران را مرتب می‌کند. selectUser با error handling robust، کاربران نامعتبر را مدیریت می‌کند. والد رویدادها را مدیریت کرده و از reactivity بهره می‌برد. استفاده از key در v-for باعث بهینه‌سازی رندرینگ DOM می‌شود. این الگو برای لیست‌های بزرگ، داشبوردها و جداول تعاملی مناسب است.
بهترین شیوه‌ها در ویو جی‌اس برای کامپوننت‌ها:
- استفاده از defineComponent و setup در Composition API.
- تعریف نوع Props برای جریان داده قابل پیش‌بینی.
- تعریف Emits برای مدیریت رویدادها.
- استفاده از reactive و computed برای مدیریت داده‌های واکنشی.
- استفاده از key در v-for برای رندرینگ بهینه.
اشتباهات رایج: استفاده بیش از حد از متغیرهای global (memory leaks)، نبود error handling، الگوریتم‌های ناکارآمد و ارتباط نامناسب کامپوننت‌ها. برای دیباگ از Vue Devtools استفاده کنید. بهینه‌سازی عملکرد: کامپوننت‌های غیرهمزمان، lazy loading و deep watchers. امنیت: استفاده امن از v-html و اعتبارسنجی ورودی‌ها.
📊 جدول مرجع
| ویو جی‌اس (Vue.js) Element/Concept | Description | Usage Example |
|---|---|---|
| نام کامپوننت | شناسه و ثبت کامپوننت | name: 'UserCard' |
| Props | ارسال داده از والد به فرزند | props: { user: Object } |
| Emits | ارسال رویداد از فرزند به والد | emits: ['greet'] |
| Reactive state | مدیریت state واکنشی | const state = reactive({ count: 0 }) |
| Computed | داده مشتق شده واکنشی | const sorted = computed(() => items.sort()) |
| Lifecycle Hooks | کنترل رفتار کامپوننت | onMounted(() => { console.log('mounted') }) |
کامپوننت‌ها در ویو جی‌اس امکان ساخت برنامه‌های modular، قابل نگهداری و scalable را فراهم می‌کنند. Props، Emits، reactive state، computed properties و lifecycle hooks هسته این فرآیند هستند. گام بعدی یادگیری dynamic components، named و scoped slots، کامپوننت‌های asynchronous و الگوهای پیشرفته Composition API است. استفاده عملی از این مفاهیم در پروژه‌ها، تست و مانیتورینگ عملکرد، باعث ساخت اپلیکیشن‌های robust ویو جی‌اس می‌شود. منابع معتبر شامل مستندات رسمی Vue.js و آموزش‌های پیشرفته pattern-based برای توسعه ادامه‌دار توصیه می‌شوند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود