Ինչպես է աշխատում տաք վերաթողարկումը (hot reload) Vue CLI-ի օրինակով։

Vue CLI օգտագործում է webpack-dev-server, որը ներառում է Hot Module Replacement (HMR):

HMR-ի աշխատանքային գործընթացը Vue-ի համար հետևյալն է.

1. Դիվելոփմենտ սերվերի մեկնարկ: Երբ գործարկվում է npm run serve, webpack-dev-server-ը սկսում է սերվերը և սկսում է հետևել նախագծի ֆայլերին:
2. Ֆայլի փոփոխություն: Երբ ծրագրավորողը պահում է փոփոխությունները ֆայլում (.vue, .js, .css և այլն):
3. Փոփոխությունների հայտնաբերում: webpack-dev-server-ը հայտնաբերում է փոփոխությունը:
4. Մոդուլի վերականգնում: Webpack-ը վերականգնում է փոփոխված մոդուլը (օրինակ, Vue կոմպոնենտ):
5. Թարմացման ուղարկում: webpack-dev-server-ը ուղարկում է թարմացման փաթեթը (hotswap update) բրաուզերին WebSocket-ի միջոցով:
6. Թարմացման կիրառումը: HMR-ի հաճախորդային մասը (կառուցման կոդում ինտեգրված) ստանում է փաթեթը և փորձում է այն կիրառել: Vue կոմպոնենտների համար դա նշանակում է հին կոմպոնենտի սահմանումը փոխարինել նորով, պահպանելով ներկայիս վիճակը (օրինակ, data()-ի տվյալները):
7. DOM-ի թարմացում: Vue-ն ռեակտիվ կերպով թարմացնում է DOM-ը նոր շաբլոնով կամ կոմպոնենտի լոգիկայով, առանց ամբողջ էջը վերաթողարկելու:

Թարմացման փաթեթի կառուցվածքի օրինակ:

{
  "hash": "...", // Կառուցման հեշ
  "c": { // Թարմացված կառուցման մասեր
    "src/components/HelloWorld.vue": true // Մոդուլ, որը պետք է թարմացվի
  }
}

HMR-ի հաճախորդային կոդը ստանում է այս փաթեթը և իրականացնում թարմացման լոգիկան src/components/HelloWorld.vue-ի համար:

// Pseudocode օրինակ HMR-ի հաճախորդային կոդում
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue կոմպոնենտի թարմացման լոգիկա, վիճակի պահպանմամբ
    // Զուգահեռաբար, դա կառավարում է vue-loader-ը webpack-dev-server-ի հետ միասին
  });
}

Այսպիսով, երբ կոմպոնենտում փոփոխություն է կատարվում, միայն այդ կոմպոնենտը թարմացվում է բրաուզերի հիշողության մեջ, ոչ ամբողջ էջը, ինչը զգալիորեն արագացնում է զարգացման գործընթացը։