Vue中v-if和v-show在表单编辑场景下的选择与坑
在后台管理系统里,编辑弹窗或侧边栏表单通常会复用同一个 DOM 结构,靠切换状态来显示不同字段。很多人下意识用 v-if 控制显隐,觉得“不渲染更省性能”。可一旦表单字段多起来,或者包含上传、富文本、日期选择器等第三方组件,就会遇到切换卡顿、组件状态丢失、异步校验错乱的问题。反过来用 v-show 又会在初始渲染时创建所有分支,遇到依赖父级尺寸的组件(比如 ECharts 图表)可能报“初始化失败”。这个看似简单的选择背后,涉及 Vue 的编译时条件、DOM 复用、生命周期触发时序以及浏览器渲染层合成。这篇文章从真实表单编辑场景出发,分析 v-if 与 v-show 在渲染机制上的差异,给出可...