世界观继续沿用【智慧城市公示大屏】

世界观继续沿用【智慧城市公示大屏】

回顾：

• 浏览器 = 工地；DOM = 内存里建好的公示大屏楼房；document=大屏物业总管
• document.write：施工期可以追加广告牌；楼房完工后执行，直接推倒整栋DOM大楼，重建空白墙
• Vue3 = 一套智能大屏管理系统，不再手动指挥物业总管去贴广告牌；Vue维护一套虚拟DOM（内存草稿图纸）
• Vite（Vue3开发工具）自带热更新（HMR Hot Module Replacement）

一、Vue3 热更新 HMR（模块热替换）比喻

比喻：智慧小区大屏由一块块独立积木组件拼成（标题组件、住户列表组件、登记表单组件）。
开发时，你修改【住户列表积木】的代码。
✅ 热更新：只替换这一块积木，整栋大楼不会推倒重建！页面状态保留（表单输入的文字、勾选的选项不会清空），其余积木完全不动。
❌ 普通浏览器刷新：推倒整栋大楼，重新盖楼，页面所有填写内容全部清空。

⚠️重点区分：

1. 普通页面刷新（F5）：全部推倒、重建DOM楼房，所有状态丢失
2. Vite热更新HMR（Vue开发环境独有）：局部替换组件积木，不刷新整页、不销毁页面状态
3. document.write：要么施工阶段追加广告牌；加载完成调用，直接推倒整栋DOM大楼

Vue3最小可演示代码（Vite环境）

<!-- App.vue 智慧小区公示大屏组件 -->
<template>
  <div class="screen">
    <h1>{{ title }}</h1>
    <p>住户数量：{{ count }}</p>
    <button @click="add">增加一户</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
// ref：Vue收纳盒（响应式盒子，盒子一变，大屏自动更新）
const title = ref("智慧小区住户公示屏");
const count = ref(0);
function add(){
  count.value++;
}
</script>

上机演示步骤（F12观察）

1. npm create vite@latest 创建Vue3项目，npm run dev启动开发服务器
2. 浏览器打开页面，点按钮 count 数字增加（页面状态）
3. 直接修改App.vue里的title文字，保存文件>

✨现象：页面不会整体刷新，标题文字自动更新；刚才点击增加的住户数字 count 保留不变！
👉 这就是热更新HMR，只替换当前这个组件积木，大楼主体不拆。

F12面板观察热更新

1. Elements面板：只有<h1>这块DOM元素更新，其余DOM节点保留，没有全部销毁重建
2. Network面板：会收到Vite开发服务器推送的更新模块代码（不是完整HTML页面）
3. Console控制台：打印 [vite] hot updated: /src/App.vue 热更新日志

二、对比：Vue更新、热更新、document.write、浏览器页面生命周期（浏览器四种状态）

浏览器页面四大状态（黑板板书）

1. 状态① 页面加载施工阶段（解析HTML，构建DOM树）

比喻：楼房正在砌墙、搭建骨架。从上往下读HTML，读到script就执行JS。

• document.write：直接往墙面追加广告牌，原有DOM保留
• Vue：此时执行挂载，把虚拟DOM草稿渲染成真实DOM，一次性搭好大屏骨架

2. 状态② DOMContentLoaded（DOM骨架完工，图片资源还在路上）

墙体、广告牌DOM全部搭建完毕，图片/视频物料还没送到工地。DOM树就绪。
此时执行document.write → 推倒整栋DOM大楼

3. 状态③ window.onload（全部资源加载完毕，大楼完全竣工封顶）

图片、视频、所有资源全部下载完成，页面彻底完工。
普通原生JS页面，进入这个状态之后，再执行document.write就会清空页面。
Vue页面挂载完成，进入运行态：修改ref响应式数据，Vue通过虚拟DOM + diff算法，精准找到需要改动的DOM广告牌，局部修改，不会推倒整栋楼。

4. 状态④ 开发环境：HMR热更新状态（Vue开发特有，大楼竣工后，局部替换积木）

大楼已经建好，不用推倒大楼；只替换其中一块组件积木，页面状态保留。
⚠️ 热更新只在开发环境生效！打包上线生产环境没有HMR！

核心对比（必讲，学员最容易混淆）

操作	比喻	DOM行为	页面状态是否保留
document.write（加载阶段执行）	楼房施工中途贴广告牌	追加DOM，不推倒大楼	原有内容保留
document.write（大楼竣工后执行）	推倒整栋大楼，重建空白墙	销毁全部DOM，重新渲染	全部状态清空
Vue修改ref响应式数据（页面运行态）	修改内存草稿（虚拟DOM），只更新变化的广告牌	精准局部更新DOM	页面状态保留
Vite HMR热更新（开发改代码保存）	替换单块组件积木，大楼主体不动	替换当前组件DOM，其余DOM不变	表单、计数器等状态保留
F5页面刷新	推倒整栋大楼，全部重建	销毁全部DOM，重新挂载Vue	所有状态清空

三、Vue3响应式+虚拟DOM原理（智慧城市比喻）

Vue3用Proxy做响应式监听（相当于给收纳盒装报警器）：

当收纳盒(ref)里面数据变化，报警器触发。Vue在内存里生成虚拟DOM（草稿图纸），对比新旧草稿（diff算法），只找到需要改动的广告牌，更新真实DOM。
Vue永远不会像document.write那样，直接推倒整栋大楼。

关键一句话：
document.write是粗暴操作；Vue是精准局部更新；HMR热更新是开发工具提供的“积木替换”能力，属于Vite开发服务器的功能，不是Vue本身运行时的页面渲染能力。

四、随堂对比实验代码：Vue内如果强行写document.write会发生什么

<template>
  <div>
    <h1>Vue大屏</h1>
    <button @click="testWrite">执行document.write</button>
  </div>
</template>
<script setup>
function testWrite(){
  // Vue页面已经挂载完毕，大楼竣工！
  document.write("<h1>旧大楼全部推倒！</h1>")
}
</script>

现象：点击按钮，整个Vue页面全部消失，只剩下新写的h1标题。
✅ 说明：就算是Vue页面，只要页面加载完毕，调用document.write依旧会推倒整栋DOM楼房。
👉 所以Vue项目开发严禁使用document.write，它会摧毁整个Vue挂载的DOM容器。

✅ 课堂口述稿（一口气讲）

继续智慧城市大屏比喻，Vue3页面的页面由一块块独立积木组件搭建而成。
浏览器页面分四个状态：第一，页面加载施工阶段，DOM楼房正在搭建；第二DOMContentLoaded，DOM骨架完工；第三window.onload，所有资源下载完毕大楼竣工封顶；第四，Vite开发环境的HMR热更新状态。

document.write在楼房施工阶段，可以追加广告牌；大楼竣工之后执行document.write，会直接推倒整栋DOM大楼。
Vue使用Proxy响应式收纳盒、虚拟DOM草稿和diff算法；修改Vue的响应式数据，只会精准更新对应的广告牌，不会推倒整栋大楼。
Vite的热更新HMR，是开发环境专属功能：修改组件代码保存，只替换这一块积木，整栋大楼不会推倒，页面填写、计数器状态全部保留；F5普通刷新则推倒整栋大楼，所有状态丢失。
注意，热更新只在开发环境生效，打包上线没有热更新；就算是Vue页面，一旦执行document.write，依然会直接摧毁整个Vue页面DOM。

随堂提问

1. Vue修改ref响应式变量，会不会推倒整个DOM大楼？>

不会，虚拟DOM diff，只更新变化的局部DOM广告牌。

2. HMR热更新和F5刷新最大差别是什么？>

热更新：只替换一块组件积木，页面状态保留；F5推倒整栋大楼，状态全部清空。

3. 在已经挂载好的Vue页面调用document.write，会发生什么？>

整个Vue页面DOM全部清空，大楼推倒重建。

4. 热更新是上线后也有的功能吗？>

不是，只有开发调试环境Vite提供，生产打包后没有HMR。