Vue.js切换播放/暂停图标：三元表达式传props与v-show哪种方案更优

两种方案在普通业务场景下的性能差异用户几乎感知不到，但三元表达式动态传prop的方案综合表现更优，优先选择该方案。

两种方案的差异说明 #

1. 三元传prop方案 #

代码示例：

<my-icon :icon="!isPlaying ? 'play' : 'pause'"></my-icon>

优势：

• 全程仅维护1个my-icon组件实例，初始渲染开销、内存占用都更低
• 状态切换时仅触发单个组件的prop更新，仅需要更新内部图标资源，无多余DOM操作
• 后续维护成本低，添加点击事件、自定义样式等逻辑只需要修改1个组件节点

2. v-show双实例方案 #

代码示例：

<my-icon v-show="!isPlaying" :icon="play"></my-icon>
<my-icon v-show="isPlaying" :icon="pause"></my-icon>

特点：

• 初始渲染会创建2个my-icon组件实例，隐藏的实例也会走完完整挂载流程，内存占用更高
• 状态切换时仅修改两个节点的display CSS属性，更新开销本身也很低，但需要操作两个DOM节点
• 后续需要维护两个组件节点，新增逻辑需要重复修改两处，维护成本更高

适用场景建议 #

• 常规无特殊动画需求的场景，直接选三元传prop方案即可
• 如果需要给播放/暂停图标添加不同的切换过渡动画，用v-show配合Vue的transition组件实现起来更简单，这种场景可以选择v-show方案

内容的提问来源于stack exchange，提问作者Vasyl