تلپورتر
تلپورتر در ویو جی‌اس (Vue.js) یک ویژگی قدرتمند است که امکان رندر کردن المان‌ها خارج از سلسله مراتب والد خود را فراهم می‌کند، بدون اینکه واکنش‌پذیری (reactivity) یا بایندینگ رویدادها مختل شود. این ویژگی به ویژه برای اجزای UI که باید روی سایر محتوا نمایش داده شوند مفید است، مانند Modals، Dropdowns، Tooltips و Notifications. استفاده از تلپورتر باعث افزایش ماژولاریتی و نگهداری آسان‌تر پروژه‌ها می‌شود، زیرا منطق و ساختار بصری از یکدیگر جدا می‌شوند.
برای استفاده از تلپورتر، از تگ <teleport> به همراه attribute to استفاده می‌کنیم که هدف DOM را مشخص می‌کند. این روش شامل مفاهیم مهم ویو جی‌اس (Vue.js) مانند Template Syntax، داده‌های واکنش‌پذیر، computed properties و مدیریت رویدادهاست. تلپورتر با اصول برنامه‌نویسی شیء‌گرا، کمک می‌کند تا منطق و UI به صورت ماژولار و قابل استفاده مجدد سازماندهی شوند.
در این آموزش، شما یاد خواهید گرفت که چگونه تلپورتر را در ویو جی‌اس (Vue.js) پیاده‌سازی کنید، داده‌های واکنش‌پذیر را مدیریت کنید و از مشکلات رایجی مانند memory leaks یا رندر ناکارآمد DOM جلوگیری کنید. مثال‌های ارائه شده واقعی و قابل استفاده در پروژه‌های ویو جی‌اس (Vue.js) هستند و نشان می‌دهند که چگونه تلپورتر می‌تواند در معماری نرم‌افزار برای ایجاد UI ماژولار و بهینه مورد استفاده قرار گیرد.
مثال پایه <template>
text<div id="app">
<h1>مثال پایه تلپورتر</h1>
<button @click="showModal = true">باز کردن Modal</button>
<teleport to="body">
<div v-if="showModal" class="modal">
<h2>محتوای Modal</h2>
<p>این المان از طریق تلپورتر رندر شده است</p>
<button @click="showModal = false">بستن</button>
</div>
</teleport>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>
<style>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
</style>در این مثال، با کلیک روی دکمه، state واکنش‌پذیر showModal برابر true می‌شود. محتوای داخل <teleport> در تگ body رندر می‌شود، نه در DOM والد. این بدان معناست که Modal بدون تغییر در ساختار DOM اصلی، روی سایر محتوا نمایش داده می‌شود.
استفاده از ref برای ایجاد state واکنش‌پذیر، از memory leaks و ناسازگاری‌های DOM جلوگیری می‌کند. تلپورتر اصول separation of concerns را نمایش می‌دهد: المان‌های UI می‌توانند خارج از درخت منطقی رندر شوند، در حالی که reactivity و رویدادها فعال باقی می‌مانند.
مثال کاربردی <template>
text<div id="app">
<h1>مثال کاربردی تلپورتر</h1>
<button @click="toggleDropdown">نمایش Dropdown</button>
<teleport to="body">
<ul v-if="openDropdown" class="dropdown">
<li v-for="item in items" :key="item.id" @click="selectItem(item)">
{{ item.name }}
</li>
</ul>
</teleport>
<p v-if="selectedItem">انتخاب شده: {{ selectedItem.name }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const openDropdown = ref(false);
const selectedItem = ref(null);
const items = ref([
{ id: 1, name: 'گزینه 1' },
{ id: 2, name: 'گزینه 2' },
{ id: 3, name: 'گزینه 3' }
]);
function toggleDropdown() {
openDropdown.value = !openDropdown.value;
}
function selectItem(item) {
selectedItem.value = item;
openDropdown.value = false;
}
</script>
<style>
.dropdown {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border: 1px solid #ccc;
list-style: none;
padding: 0;
}
.dropdown li {
padding: 10px 20px;
cursor: pointer;
}
.dropdown li:hover {
background-color: #f0f0f0;
}
</style>این مثال نشان می‌دهد که Dropdown می‌تواند با استفاده از تلپورتر خارج از DOM والد رندر شود، بنابراین UI درست نمایش داده می‌شود. v-for برای ساخت لیست دینامیک استفاده شده و انتخاب آیتم در state واکنش‌پذیر selectedItem ذخیره می‌شود.
Best Practices شامل استفاده از keyهای یکتا در v-for، حذف event listeners و watchers هنگام destroy شدن component برای جلوگیری از memory leaks، و بهینه‌سازی آپدیت‌های DOM است. طراحی ماژولار و پیروی از اصول OOP توصیه می‌شود. تلپورتر امکان کنترل انعطاف‌پذیر محل رندر UI را فراهم می‌کند، بدون اینکه reactivity تحت تأثیر قرار گیرد.
ویو جی‌اس (Vue.js) Best Practices و اشتباهات رایج:
- همیشه attribute
toرا مشخص کنید. - برای state واکنش‌پذیر از
refیاreactiveاستفاده کنید. - استفاده بیش از حد از تلپورتر را اجتناب کنید.
- برای بهینه‌سازی عملکرد از Lazy-Loading یا Conditional Rendering بهره ببرید.
- هنگام destroy شدن component، event listeners و watchers را پاکسازی کنید.
- CSS را scope کنید تا تداخل نداشته باشد.
- توابع callback را با error handling امن کنید.
- تعاملات تلپورتر را در تمام برنامه تست کنید.
📊 جدول مرجع
| ویو جی‌اس (Vue.js) Element/Concept | Description | Usage Example <teleport> | رندر المان‌ها خارج از درخت والد | <teleport to="body"><div>محتوا</div></teleport> |
|---|
با استفاده از تلپورتر، می‌توان المان‌ها را خارج از والد منطقی رندر کرد و در عین حال reactivity و event binding را حفظ نمود. این امکان ایجاد UIهای ماژولار و قابل استفاده مجدد مانند Modals و Dropdowns را فراهم می‌کند. مراحل بعدی شامل ترکیب تلپورتر با Vue Router یا Pinia/Vuex برای مدیریت state و بهینه‌سازی عملکرد و encapsulation کامپوننت‌ها است. تمرین روی پروژه‌های متن‌باز و مستندات رسمی توصیه می‌شود.