[toc]
| 单词 | 词性 | 音标 | 含义 |
|---|---|---|---|
| render | v. | /ˈrendə(r)/ | 渲染，把数据填进页面结构、得到最终页面 |
| rendering | n. | /ˈrendərɪŋ/ | 渲染（过程），分为后端渲染与前端渲染两类 |
| template | n. | /ˈtemplət/ | 模板，写“结构 + 占位”的地方，运行时被填进数据 |
| expression | n. | /ɪkˈspreʃn/ | 表达式，开发时不知道数据只能先写占位表达式 |
| dynamic | adj. | /daɪˈnæmɪk/ | 动态的，同一页面结构显示不同数据要的就是动态填充 |
| server-side | adj. | /ˈsɜːvə saɪd/ | 服务端的，后端渲染由服务器填好数据再返回整页 HTML |
| client-side | adj. | /ˈklaɪənt saɪd/ | 客户端的，前端渲染由浏览器拿到数据后自己填 |
Lecture02-渲染的概念
1、本节讲什么
理解"渲染"到底是什么意思、为什么 HTML 做不了动态数据，以及后端渲染 / 前端渲染两种方式——从而明白 Vue 帮你做了什么事。
2、概念速览
什么是渲染：把"数据"填进"页面结构"，得到最终页面的过程。开发时页面里写的是"表达式 / 占位"，运行时执行它得到具体数据，再替换成真实内容。
为什么需要它：同一个页面结构要显示不同数据（比如同一个表格显示不同学生），HTML 写死了就做不到，必须"动态填充"。
两种类型：
- 后端渲染：服务器把数据填进页面，返回完整 HTML（如 JSP、Thymeleaf）。
- 前端渲染：服务器只返回数据，浏览器拿到数据自己填（如 Vue、React）。
正确 vs 误区：渲染 ≠ 刷新页面。渲染是"数据填进页面结构"这个动作；前端渲染下，它发生在浏览器里。
1、一个必须面对的问题
同一个前端页面，要显示的数据结构是一样的，但数据各不相同：
| 小明 | 小红 | 小刚 | |
|---|---|---|---|
| id | 5 | 7 | 21 |
| 姓名 | 赵大明 | 马小红 | 刘忠刚 |
| 年龄 | 25 | 37 | 46 |
| 专业 | 贴膜 | 人力资源 | 疏通下水 |
同样的数据结构，同一个页面，要显示不同数据，就会遇到一个问题：HTML做不到
<table>
<tr><th>id</th><th>姓名</th><th>年龄</th><th>专业</th></tr>
<tr><td>5</td><td>赵大明</td><td>25</td><td>贴膜</td></tr>
<tr><td>7</td><td>马小红</td><td>37</td><td>人力资源</td></tr>
<tr><td>21</td><td>刘忠刚</td><td>46</td><td>疏通下水</td></tr>
</table>
在HTML代码中，任何数据都是写死的，不能动态更改，除非修改代码
在项目运行过程中，每秒成千上万次请求，每次请求都索取不同数据
那难不成让程序员每秒修改一万次代码？再重新部署一万次？这绝不可能
所以正确的模式一定是：程序写好并部署运行之后，不需要修改代码就能够动态显示数据
在这个要求下，我们再来看HTML，HTML标签定义好页面结构之后，具体填充数据的地方必须是动态填充数据：
<table>
<tr><th>id</th><th>姓名</th><th>年龄</th><th>专业</th></tr>
<c:foreach items="${requestScope.stuList}" var="stu">
<tr><td>${stu.stuId}</td><td>${stu.stuName}</td><td>${stu.stuAge}</td><td>${stu.stuSubject}</td></tr>
</c:foreach>
</table>
2、什么是渲染？
- 开发时：程序员不知道具体数据是什么，也不可能知道，所以只能写表达式
- 运行时：执行表达式背后的代码，得到具体数据，再用数据替换原来的表达式
3、渲染的两种类型
3.1、后端渲染
① 执行过程
后端执行完渲染操作，把渲染完毕、带有所有数据的纯HTML页面返回给前端
② 相关技术
看看就行，不用记
- JSP
- Thymeleaf
- Freemarker
- Volecity
- ……
3.2、前端渲染
① 执行过程
② 相关技术
- 原生DOM API
- jQuery库
- Vue.js框架
- React
- AngularJS
- ……
4、趋势
企业实际开发中采用前后端分离的开发方式已经不可阻挡，所以渲染方式也是以前端渲染为主
3、先看效果
纯概念的一节，用一张图体会"开发时写表达式 → 运行时被替换成真实数据"：
模板里写的是：<tr><td>${stuName}</td></tr>
运行时被替换成：<tr><td>赵大明</td></tr>
记住结论：Vue 属于"前端渲染"。我们后面写的模板，是运行时在浏览器里被填进数据的"表达式"。
4、照着做
- 看第 1 小节的表格：同一个页面结构，数据不同——这就是"动态显示"要解决的问题。
- 看后端渲染流程图：服务器填数据 → 返回整页 HTML。
- 看前端渲染流程图：服务器只返回数据 → 浏览器填 → 才得到页面。
- 记住结论：Vue 属于前端渲染；我们后面写的模板是"运行时在浏览器里被填数据的表达式"。
5、常见疑问
- Q：渲染到底是啥？ A：把"数据"填进"页面结构"、得到最终可见页面的动作。你写的是结构 + 占位，运行时用真实数据替换占位。
- Q：后端渲染和前端渲染，实际开发用哪个？ A：现在企业主流是前后端分离 + 前端渲染（Vue / React）。后端只提供数据接口（你已会的 SpringMVC），页面渲染交给前端。
- Q：渲染和后面要学的"响应式"有什么关系？ A：渲染是"一次性把数据填进去"；响应式是"数据一变，页面自动重新填那部分"（第 12 节）。渲染是基础，响应式是 Vue 的进阶能力。
6、规范要点
- 心里有"模板 = 结构 + 占位"：写模板时想清楚"哪里是数据会填进来的位置"。
- 前后端分离下，前端只管"拿数据、填页面"，别把业务逻辑堆在模板里。
7、本节验证
- 能说清“渲染 = 把数据填进页面结构”这个动作 ✅
- 说得清 HTML 为什么做不到动态显示数据 ✅
- 能分清后端渲染（返回整页 HTML）和前端渲染（只返回数据）✅
- 知道 JSP / Thymeleaf 属后端渲染，Vue / React 属前端渲染 ✅
- 记住 Vue 属于前端渲染，模板是运行时在浏览器里被填数据的表达式 ✅