HMR improves development efficiency through local update modules in Vue, and its working principle relies on construction tools such as Vite or Webpack. Taking Vite as an example, it utilizes the browser native ES module system, and after the file is modified, it notifies the client that it only reloads the change module and its dependencies through WebSocket, and triggers the update logic. For Vue single file components: 1. Template modification will recompile and replace the rendering function, retaining the state; 2. Script modification will try to retain the instance state and replace the new logic; 3. Style modification will directly inject the new CSS. Common causes of HMR failure include state loss, root component update failure, dependency incorrect declaration, and third-party library incompatibility. Solutions include: extracting the state to the hot replaceable part, avoiding frequent modification of the initialization logic, and checking the document to confirm whether you need to manually add import.meta.hot.accept(). Developers only need to know: modifying .vue files is usually updated partially, and the page refresh instructions have modified the non-hot-replaceable part. You should check the console prompt for exceptions.

HMR (Hot Module Replacement) is one of the key mechanisms to improve development efficiency in Vue development server. It allows you to partially update the modified module without refreshing the entire page, thereby retaining the current page status. This is very useful for debugging components, style adjustments and other scenarios.

How does HMR work in Vue?

Vue's development servers are usually based on Vite or Webpack. Different tools implement HMR slightly differently, but the core idea is to replace only the changed modules instead of reloading the entire page.

Taking Vite as an example, it uses the browser's native ES module system, and does not need to be packaged during the development stage, and directly loads the modules on demand. When you modify a file, Vite will notify the client of changes through WebSocket, then reload the module and its dependencies only, and trigger the HMR update logic.

How are Vue single file components hot updated?

Vue's single file component (SFC) consists of three parts: <template></template> , <script></script> and <style></style> . HMR can be effective in all three parts:

• Template update : When <template></template> is modified, Vue will recompile the template and replace the old rendering function to keep the component state unchanged.
• Script update : If only data or method is modified, HMR will try to preserve the state of component instances and replace only new logic.
• Style update : The modification of the style part will directly inject new CSS into the page, and will not affect the JS status.

Behind this is actually Vue-loader (Webpack) or plug-ins inside Vite are processing SFC and injecting HMR support code.

Why does HMR sometimes not take effect?

While HMR is convenient, there are some limitations and common questions:

• State loss : If you modify the responsive data structure in the component's data() or setup() , it may cause the state to be reset.
• Root component update failed : Root components such as App.vue generally do not support hot updates, and the entire page will still be refreshed after modification.
• Some dependencies are not properly declared : If a module is not exported correctly or the dependencies are not written clearly, the HMR may not know who to update.
• Third-party libraries are incompatible : Some libraries do not adapt to HMR, which may also cause update failure.

Solutions include:

• Try to use composable logic to extract the state from the hot-swap part
• Avoid frequent modification of component initialization logic
• Check the document to confirm whether you need to manually add import.meta.hot.accept()

Actually, what do you just need to care about?

For most developers, HMR is out of the box. All you need to know:

• When modifying .vue files, only partial updates are usually
• If the page is refreshed, it may have been modified that cannot be replaced.
• You can view the console output when an exception occurs, and there are usually prompts

It is possible to use normally without delving into the underlying principles, but understanding these can help troubleshoot problems.

Basically that's it.

The above is the detailed content of How does HMR work in Vue development server?. For more information, please follow other related articles on the PHP Chinese website!