v-show与v-if的原理差异及适用场景

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

本题主要考核候选人三个核心能力维度：

Vue指令编译原理理解：是否掌握模板指令到真实DOM操作的转化过程
渲染性能优化意识：能否根据场景选择最合理的渲染控制方式
框架底层机制认知：是否了解虚拟DOM diff策略与CSS样式控制的实现差异

具体技术评估点：

指令编译后的代码结构差异
虚拟DOM节点创建/销毁机制
CSS display属性的渲染管线影响
组件生命周期钩子触发差异
高频切换场景的性能取舍

技术解析

关键知识点

虚拟DOM Patch策略 > CSS渲染管线 > 组件生命周期

原理剖析

v-if：

编译阶段转化为条件判断语句
通过createComment/removeChild动态操作DOM
触发完整的组件生命周期（created/mounted等）
核心代码结构：

 function render() {
 return this.visible ? _c('div') : _e()
}

v-show：

编译为样式控制指令
始终保留DOM节点，通过display: none控制可见性
仅触发beforeUpdate/updated生命周期
核心编译结果：

 function render() {
 return _c('div', { directives: [{ 
 name: "show", 
 value: this.visible 
 }] })
}

常见误区

认为v-show完全不会触发重排（实际上修改display仍触发渲染层合并）
误用v-show控制组件树显隐（导致子组件状态保留）
在SSR场景错误使用v-show（服务端无法解析display状态）

问题解答

本质差异： v-if通过条件编译实现DOM节点的动态增删，v-show通过CSS display控制显隐

v-memo指令的缓存优化作用

Tue, 04 Mar 2025 07:00:31 +0000

考察点分析

本题主要考察以下核心能力维度：

Vue框架原理理解：对Vue3新特性及虚拟DOM更新机制的掌握程度
性能优化思维：针对大型列表场景的渲染优化策略选择能力
API应用能力：对v-memo指令参数配置和边界条件的把控

具体技术评估点包括：

虚拟DOM diff算法瓶颈认知
记忆化技术（memoization）在框架层的实现原理
依赖数组（dependency array）的深浅比较机制
动态模板与静态子树的条件更新策略
指令使用误区与性能反模式识别

技术解析

关键知识点

虚拟DOM复用 > 依赖数组比较 > Patch算法优化

原理剖析

v-memo通过缓存虚拟DOM子树及其快照依赖值，在组件更新时：

对比当前依赖数组与缓存快照
若依赖未变更，跳过整个子树的patch过程
直接复用已存在的虚拟DOM节点

技术实现要点：

 const cached = {
 deps: prevDeps,
 vnode: prevVNode
}
if (isSame(cached.deps, newDeps)) {
 return cached.vnode
}

常见误区

在动态内容上使用导致更新失效（如：误缓存包含v-for索引的表达式）
依赖数组包含引用类型时未注意深浅比较规则
过度使用导致内存泄漏（缓存大量DOM节点）

问题解答

v-memo通过缓存虚拟DOM子树及对应的依赖快照，在组件更新时若依赖值未变化，直接跳过该子树diff过程。例如在表格渲染时，对稳定行数据声明v-memo="[row.id, row.status]，当行ID和状态未改变时，即使父组件触发更新，该行也不会重新渲染。

解决方案

编码示例

 <template>
 <tr v-for="row in rows" :key="row.id" v-memo="[row.id, row.status]">
 <!-- 静态内容占比80%的列 -->
 <td>{{ row.id }}</td>
 <td>{{ row.name }}</td>
 <td>{{ formatDate(row.createTime) }}</td>
 
 <!-- 动态内容需要排除在memo之外 -->
 <td :class="{ warning: row.status === 'pending' }">
 {{ row.status }}
 </td>
 </tr>
</template>

优化说明

时间复杂度：将O(n)的diff计算降为O(1)（命中缓存时）
内存消耗：需缓存N个vnode，适用于长列表但更新不频繁的场景
防踩坑：避免缓存包含index或临时ID的表达式

指令原理 on ZiYang FrontEnd Interview

v-show与v-if的原理差异及适用场景

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

v-memo指令的缓存优化作用

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

编码示例

优化说明

扩展建议

深度追问

如何验证v-memo是否生效？

指令原理 on ZiYang FrontEnd Interview

v-show与v-if的原理差异及适用场景

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

v-memo指令的缓存优化作用

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

编码示例 link

优化说明 link

扩展建议 link

深度追问 link

如何验证v-memo是否生效？ link

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

编码示例

优化说明

扩展建议

深度追问

如何验证v-memo是否生效？