适用读者：写过 v-if 但不知道它和 v-show 差在哪的人。
前置：S14-B01。
覆盖旧文：1483(37) 1486(31) 1484(26) 1485(42) 1482(7) 1487(15) 1488(26) = 184 点。
覆盖扩展：E-S14-002（v-if vs v-show）。
上一篇：S14-B01 · 前端全景与 Vue 3 起步
下一篇：S14-B03 · 响应式。

---

1. 一句话结论

指令做的事只有两类：绑定数据（v-bind/v-model）与控制渲染（v-if/v-show/v-for）。

指令	作用	简写
v-bind	绑定属性	:href="url"
v-on	绑定事件	@click="fn"
v-model	双向绑定（表单）	—
v-if	条件渲染（销毁/重建 DOM）	—
v-show	条件显示（display:none）	—
v-for	列表渲染	—
v-html	渲染 HTML（XSS 风险）	—

---

2. v-if 与 v-show 的真实差别（E-S14-002）

维度	v-if	v-show
DOM	不渲染 / 销毁重建	始终渲染，切 display
初始开销	低（不渲染）	高（总渲染）
切换开销	高（重建）	低（改样式）
适用	不常切换	频繁切换

判据："这个元素会频繁显示/隐藏吗？" 会 → v-show；不会（权限、条件分支）→ v-if。

---

3. 事件与修饰符

修饰符	作用
.stop	阻止冒泡
.prevent	阻止默认行为
.once	只触发一次
.self	仅自身触发
.enter / .esc	按键修饰符（A-1488）

<form @submit.prevent="onSubmit">
<button @click.stop="del">删除</button>

---

4. 列表渲染与 key

<li v-for="item in list" :key="item.id">{{ item.name }}</li>

要点	说明
key 必须稳定唯一	用 index 在插入/删除时会错位
不要用 index 当 key	除非列表只追加

"为什么 key 重要"：Vue 靠 key 判断"这个节点是不是同一个"。用 index 时，删除中间项会导致后续节点被错误复用 → 状态错乱。

---

5. v-html 的安全边界

<div v-html="userContent"></div>   <!-- ⚠️ XSS -->

v-html 不会转义——用户内容必须先净化（DOMPurify）或改用文本插值 {{ }}。

判据："这段 HTML 来自用户吗？" 是 → 净化后再渲染。

---

6. 五个误区

误区	真相
"v-if 与 v-show 等价"	一个销毁重建，一个改样式
"v-for 用 index 当 key 也行"	中间插入/删除会错乱
"v-html 能自动转义"	不转义，XSS 风险
"v-model 只能用于 input"	也可用于组件（modelValue）
"修饰符可有可无"	.prevent/.stop 缺失会导致刷新/冒泡

---

7. 自检

1. v-if 与 v-show 的三个差异？
2. 什么时候必须用 v-show？
3. 为什么 key 不能用 index？
4. v-html 的风险怎么防？
5. .prevent 与 .stop 各阻止什么？

---

8. 下一篇

S14-B03 · 响应式：ref/reactive/计算/侦听

语法讲完，下一篇进机制层：为什么 watch 不是同步的（实测）。

---

本篇属于系列《S14 · 前端与可视化》。旧文来源：A-1483/1486/1484/1485/1482/1487/1488；扩展点 E-S14-002。