mounted (mounted)
هوک mounted یعنی «سوار شد». کامپوننت الآن داخل درخت DOM است. بنابراین می توانی به عنصرهای صفحه و $refs دسترسی بگیری و کارهای UI را انجام دهی.
mounted چه زمانی اجرا می شود؟
این هوک بعد از اضافه شدن کامپوننت به DOM اجرا می شود. بنابراین هم داده ها در دسترس اند، هم عنصرهای واقعی صفحه. حالا می توانی فوکوس بدهی، رویداد متصل کنی، یا اندازه بگیری.
نمونه منبع: فوکوس خودکار روی ورودی
پس از mounted، می توانیم فوراً روی ورودی فوکوس کنیم.
<script>
export default {
mounted() {
this.$refs.inpName.focus();
}
};
<\/script>
چه کارهایی مناسب mounted است؟
کارهای وابسته به DOM را اینجا انجام بده. مثلاً اسکرول، اندازه گیری المان ها، فوکوس، یا ادغام با کتابخانه های UI.
گام های سریع
- ابتدا داده ها را آماده کن.
- در mounted به DOM دسترسی بگیر.
- فوکوس یا لیسنرها را تنظیم کن.
نکته: اگر چیزی به DOM نیاز ندارد، آن را قبل تر انجام بده. برای «قبل از DOM»، صفحه beforeMount را ببین.
هشدار: کارهای سنگین UI را کنترل کن. تاخیر ایجاد نکن. بهتر است منطق داده ای در created یا هوک های چرخه عمر بررسی شود.
جمع بندی سریع
- mounted بعد از ساخت DOM اجرا می شود.
- به المان ها و
$refsدسترسی داری. - کارهای UI وابسته به DOM اینجاست.
- منطق غیر UI را جلوتر انجام بده.