Vue CLI nümunəsində isti yenidən yükləmə (hot reload) necə işləyir?

Vue CLI webpack-dev-server istifadə edir və Hot Module Replacement (HMR) daxil edir.

Vue üçün HMR-nin işləmə prosesi aşağıdakı kimidir:

1. İnkişaf serverini işə salmaq: npm run serve əmri ilə webpack-dev-server serveri işə salır və layihənin fayllarını izləməyə başlayır.
2. Fayl dəyişiklikləri: İnkişaf etdirici faylda (.vue, .js, .css və s.) dəyişiklik etdikdə.
3. Dəyişikliklərin aşkarlanması: webpack-dev-server dəyişiklikləri aşkarlayır.
4. Modulun yenidən qurulması: Webpack dəyişdirilmiş modulu (məsələn, Vue komponenti) yenidən qurur.
5. Yeniləmənin göndərilməsi: webpack-dev-server yeniləmə paketini (hotswap update) WebSocket vasitəsilə brauzərə göndərir.
6. Yeniləmənin tətbiqi: HMR-nin müştəri tərəfi (quruluş koduna daxil edilmiş), paketi alır və tətbiq etməyə çalışır. Vue komponentləri üçün bu, köhnə komponent tərifini yenisi ilə əvəz etmək, mövcud vəziyyəti (məsələn, data() içindəki məlumatlar) saxlamaq deməkdir.
7. DOM-un yenilənməsi: Vue yeni şablon və ya komponent logikasını istifadə edərək DOM-u reaktiv şəkildə yeniləyir, bütün səhifəni yenidən yükləmədən.

Yeniləmə paketinin strukturu nümunəsi:

{
  "hash": "...", // Quruluş hash-i
  "c": { // Yenilənmiş quruluş hissələri
    "src/components/HelloWorld.vue": true // Yenilənməsi lazım olan modul
  }
}

HMR müştəri kodu bu paketi alır və src/components/HelloWorld.vue üçün yeniləmə məntiqini işə salır.

// HMR müştəri kodunda nümunə pseudokod
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue komponentinin yenilənməsi məntiqi, vəziyyəti saxlayaraq
    // Adətən, bu vue-loader və webpack-dev-server tərəfindən idarə olunur
  });
}

Beləliklə, komponentdə dəyişiklik edildikdə, yalnız bu komponent brauzer yaddaşında yenilənir, bütün səhifə deyil, bu isə inkişafı əhəmiyyətli dərəcədə sürətləndirir.