热重载

"热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 .vue 文件时,所有该组件的实例会被替换,并且不需要刷新页面。它甚至保持应用程序和被替换组件的当前状态!当你调整模版或者修改样式时,这极大的提高了开发体验。

hot-reload

状态保留规则

  • 当编辑一个组件的 <template> 时,这个组件实例将就地重新渲染,并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。

  • 当编辑一个组件的 <script> 时,这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 <script> 可能包含带有副作用的生命周期钩子,所以将重新渲染替换为重新加载是必须的,这样做可以确保组件行为的一致性。这也意味着,如果你的组件带有全局副作用,则整个页面将会被重新加载。

  • <style> 会通过 vue-style-loader 自行热重载,所以它不会影响应用的状态。

用法

当使用脚手架工具 vue-cli 时,热重载是开箱即用的。

当手动设置你的工程时,热重载会在你启动 webpack-dev-server —hot 服务时自动开启。

高阶用户可能希望移步 vue-loader 内部使用的 vue-hot-reload-api 继续查阅。

关闭热重载

热重载默认是开启的,除非遇到以下情况:

  • webpack 的 target 的值是 node (服务端渲染)
  • webpack 会压缩代码
  • process.env.NODE_ENV === 'production'

你可以设置 hotReload: false 选项来显式关闭热重载:

  1. module: {
  2. rules: [
  3. {
  4. test: /\.vue$/,
  5. loader: 'vue-loader',
  6. options: {
  7. hotReload: false // 关闭热重载
  8. }
  9. }
  10. ]
  11. }

原文: https://vue-loader-v14.vuejs.org/zh-cn/features/hot-reload.html