key、v-if / v-show、自定义 v-model 有什么作用
先理解原理和示例,再练习完整口述与追问。
回答要点
key 标识节点身份,动态增删排序用稳定业务 ID;索引容易使输入状态错位。v-if 控制创建销毁,v-show 主要控制显示。Vue2 组件默认 v-model 对应 value / input,也能通过 model 配置调整。
原理拆解
这三个问题分别对应身份、存在和数据契约。key 帮助框架把新旧兄弟节点匹配到同一个业务实体;v-if 控制分支创建销毁,v-show 通常只控制显示并保留实例;Vue2 自定义组件 v-model 默认展开为 value prop 与 input 事件,仍是父传数据、子发更新意图。它们可以协作,但不能互相替代。
示例与推演
编辑列表先用 row.id 作为 key,避免排序后草稿跟错行。很少打开的复杂编辑器可用 v-if 按需创建,频繁切换且需保留草稿时评估 v-show。Editor 收到 value,输入时 emit input 通知父更新。若切换记录确实要丢弃实例状态,可改变稳定的记录 key,但需要确认不会丢失用户未保存内容。
易错点
随机 key 会导致反复重建,v-show 隐藏不代表请求或计时器停止。Vue3 默认模型事件和同节点 v-if/v-for 优先级与 Vue2 有差异,不能混用。
参考回答可直接练习口述
key 决定同级节点身份,动态列表用稳定 ID,避免索引让输入状态串行。v-if 创建销毁,v-show 隐藏但保留实例,选择看初始成本、切换频率和是否保留状态。Vue2 自定义组件的 v-model 默认把值传给 value,再通过 input 通知父更新。三者分别处理身份、存在与值契约,不能靠改随机 key 来替代状态管理。