v-if、v-for、v-bind、v-on是Vue四大基础指令：v-if控制DOM存在性，v-for需用唯一key高效渲染列表，v-bind动态绑定属性，v-on监听事件并支持修饰符，四者常组合使用。
v-if、v-for、v-bind 和 v-on 是 Vue 最基础也最常用的四个指令，它们分别解决条件渲染、列表循环、属性绑定和事件响应这四类高频需求。掌握它们的差异和关键细节，比死记语法更重要。
v-if：控制元素是否“真正存在”
v-if 根据表达式真假决定 DOM 元素是否被创建或销毁。为真时渲染，为假时整个节点从 DOM 中移除，不占内存也不触发生命周期。
- 支持链式写法：
v-if、v-else-if、v-else，注意v-else必须紧跟v-if或v-else-if - 适合用在切换开销不频繁、组件较重的场景（比如登录态切换、权限区块）
- 与
v-show不同：后者只是加display: none，元素始终在 DOM 中；v-if是彻底卸载/重建，初始渲染快但切换慢 - 不要在同一个元素上同时使用
v-if和v-for，优先级问题易导致意外行为；如需条件过滤列表，应先用计算属性处理数据
v-for：安全高效地渲染列表
v-for 用于基于数组、对象或数字生成多个 DOM 节点，但它默认采用“就地复用”策略——不加 :key 时，Vue 不会移动节点，只更新内容，容易引发状态错乱。
- 必须为每个循环项提供唯一且稳定的
:key，推荐用数据本身的 id，避免用index - 遍历数组：
v-for="(item, index) in list"；遍历对象：v-for="(value, key, index) in obj" - 常见陷阱：输入框内容随列表排序变化而“漂移”，根本原因就是缺少正确
key或 key 值重复/不稳定 - 若需响应式地添加/删除数组项，用
push、splice、unshift等 Vue 检测得到的方法，避免直接赋值arr[i] = xxx
v-bind：把数据“挂”到 HTML 属性上
v-bind 动态绑定任意 HTML 属性（包括 class、style、src、href、disabled 等），值可以是字符串、对象、数组甚至表达式。
立即学习“前端免费学习笔记（深入）”；
- 简写为
:，例如:src="url"等价于v-bind:src="url" - 绑定 class：
:class="{ active: isActive, 'text-danger': hasError }"或:class="[baseCls, { active: isActive }]" - 绑定 style：
:style="{ color: textColor, fontSize: size + 'px' }"或:style="[baseStyle, overrideStyle]" - 绑定组件 prop：
<my-comp :title="pageTitle" :disabled="isLocked"></my-comp>，这是父子通信的基础方式
v-on：让页面“有反应”
v-on 监听 DOM 事件并触发方法或内联语句，是实现用户交互的核心指令。
- 简写为
@，例如@click="handleClick"等价于v-on:click="handleClick" - 支持事件修饰符：
.stop（阻止冒泡）、.prevent（阻止默认行为）、.once（只触发一次）、.self（仅当前元素触发） - 传参写法：
@click="handleClick(item)"，也可用$event显式接收原生事件对象：@click="handleClick($event, item)" - 表单常用组合：
@input实时监听、@change失焦后触发；更推荐用v-model简化双向绑定
这四个指令不是孤立的，实际开发中常组合使用：比如用 v-if 控制表单显示，v-for 渲染字段，v-bind 动态设置 class 或禁用状态，再用 v-on 处理提交和校验。理解它们背后的响应式机制和 DOM 更新逻辑，才能写出稳定又高效的 Vue 代码。
