揭秘Vite HMR：Vue 3中的更新前后关系大解剖

2024-01-18 03:57:36

前言

Vite是Vue 3官方推荐的前端构建工具，它以其快速的构建速度和热模块替换（HMR）功能而著称。HMR允许我们在开发过程中对代码进行修改，并在不刷新页面的情况下实时看到修改的结果。这极大地提高了开发效率，使我们可以更专注于代码的逻辑和功能，而不用担心构建和刷新页面。

Vite HMR的基本原理

Vite HMR的基本原理是：当文件发生改变时，Vite会重新构建该文件，并将新生成的模块发送到客户端。客户端收到新模块后，会将其与旧模块进行对比，并只更新那些发生改变的部分。这样就可以实现热更新，而不需要刷新整个页面。

为了实现这个过程，Vite使用了浏览器原生支持的ESM（EcmaScript Modules）模块化功能。ESM模块可以动态加载和卸载，这为HMR提供了基础。Vite会在每个模块中注入一个特殊的热更新函数，当模块发生改变时，这个函数就会被调用。热更新函数会将新模块发送到客户端，并触发客户端的热更新逻辑。

Vue 3中的HMR

在Vue 3中，HMR由@vitejs/plugin-vue插件实现。这个插件会在每个Vue组件中注入一个热更新函数，当组件发生改变时，这个函数就会被调用。热更新函数会将新组件发送到客户端，并触发客户端的热更新逻辑。

客户端的热更新逻辑由@vue/reactivity和@vue/runtime-dom两个库实现。@vue/reactivity库提供了响应式数据的功能，而@vue/runtime-dom库提供了操作DOM的功能。这两个库一起实现了Vue 3的组件更新逻辑。

当新组件发送到客户端后，@vue/reactivity库会将新组件的数据和旧组件的数据进行对比，并只更新那些发生改变的部分。然后，@vue/runtime-dom库会将更新后的数据渲染到DOM中。这样就可以实现组件的热更新，而不需要刷新整个页面。

HMR的处理场景

Vite HMR可以处理各种不同的更新场景，包括：

组件模板的改变
组件样式的改变
组件逻辑的改变
组件依赖的改变

对于不同的更新场景，Vite HMR会采用不同的处理策略。例如，对于组件模板的改变，Vite HMR会重新编译组件模板，并将新生成的组件代码发送到客户端。对于组件样式的改变，Vite HMR会重新编译组件样式，并将新生成的样式表发送到客户端。对于组件逻辑的改变，Vite HMR会重新编译组件逻辑，并将新生成的组件代码发送到客户端。对于组件依赖的改变，Vite HMR会重新解析组件的依赖，并将新生成的依赖模块发送到客户端。