beforeMount (beforeMount)
هوک beforeMount یعنی «در آستانه سوار شدن». کامپوننت آماده است، اما DOM هنوز نیست. بنابراین می توانی data را بخوانی، ولی به عنصرهای صفحه دسترسی نداری.
beforeMount چه می گوید؟
این هوک درست قبل از mounted اجرا می شود. یعنی قبل از اضافه شدن کامپوننت به DOM. پس reactive کار می کند، اما refهای DOM هنوز خالی هستند.
نمونه منبع: تفاوت beforeMount و mounted
در beforeMount، شیء $refs خالی است. در mounted پر می شود.
<script>
export default {
data() {
return {
refsObj1: '',
refsObj2: ''
};
},
beforeMount() {
this.refsObj1 = this.$refs;
},
mounted() {
this.refsObj2 = this.$refs;
}
};
<\/script>
چه زمانی مناسب است؟
برای آخرین آماده سازی داده ها خوب است. اما برای کار با DOM صبر کن. چون عنصرها هنوز درخت صفحه ندارند.
گام های سریع
- داده ها را نهایی کن.
- منطق بدون DOM را اجرا کن.
- کارهای DOM را به mounted منتقل کن.
نکته: اگر $refs خالی بود، طبیعی است. به created برای مقداردهی اولیه نگاه کن و کارهای DOM را در mounted انجام بده.
هشدار: در beforeMount به عنصرهای صفحه تکیه نکن. چون هنوز سوار نشده اند.
جمع بندی سریع
- beforeMount قبل از اضافه شدن به DOM است.
- به data دسترسی داری، نه DOM.
- $refs در beforeMount خالی است.
- کارهای DOM را در mounted انجام بده.