جاوااسکریپت - تفاوت بین رویدادهای created و mounted در Vue.js

مستندات Vue.js رویدادهای created و mounted را به شرح زیر توصیف میکند:

created

پس از ایجاد نمونه، به صورت همزمان فراخوانده میشود. در این مرحله، نمونه پردازش گزینهها را به پایان رسانده است، که به این معناست که موارد زیر راهاندازی شدهاند: مشاهده دادهها، ویژگیهای محاسبهشده، متدها، callback های watch/event. با این حال، مرحله نصب شروع نشده است و ویژگی $el هنوز در دسترس نخواهد بود.

mounted

پس از اینکه نمونه تازه نصب شده است فراخوانی میشود، جایی که el با vm. تازه ایجاد شده جایگزین شده است. اگر نمونه ریشه به یک عنصر موجود در سند نصب شود، vm.el نیز هنگام فراخوانی mounted در سند خواهد بود.

این هوک در طول رندر سمت سرور فراخوانی نمیشود.

من نظریه را میفهمم، اما در مورد عمل ۲ سوال دارم:

1. آیا موردی وجود دارد که در آن created به جای mounted استفاده شود؟
2. من میتوانم از رویداد created در چه موقعیت واقعی (کد واقعی) استفاده کنم؟

پاسخ شماره ۱

created() : از آنجایی که پردازش گزینهها تمام شده است، شما به ویژگیهای واکنشی data دسترسی دارید و میتوانید آنها را در صورت تمایل تغییر دهید. در این مرحله، DOM هنوز نصب یا اضافه نشده است. بنابراین نمیتوانید هیچ دستکاری DOM را اینجا انجام دهید

mounted(): پس از اینکه DOM نصب یا رندر شد، فراخوانی میشود. در اینجا شما به عناصر DOM دسترسی دارید و میتوان عملیات دستکاری DOM انجام داد، برای مثال گرفتن innerHTML:

console.log(element.innerHTML)

پس سوالات شما:

1. Is there any case where created would be used over mounted?

created معمولاً برای واکشی دادهها از API بکاند و تنظیم آن به خواص داده استفاده میشود. اما در SSR هوک mounted() وجود ندارد و شما باید وظایفی مانند واکشی دادهها را تنها در هوک created انجام دهید

2. What can I use the created event for, in real-life (real-code) situation?

برای واکشی هر داده اولیه مورد نیاز که باید نمایش داده شود (مثل JSON) از API خارجی و اختصاص دادن آن به هر ویژگی داده واکنشی

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}