Vue.js 三元表达式 vs v-show答案

【问题标题】：Vue.js ternary expression vs v-showVue.js 三元表达式 vs v-show
【发布时间】：2021-11-27 15:54:33
【问题描述】：

我必须有条件地更改图标类型播放/暂停，通过道具传递它。

在这种情况下我应该使用三元表达式来传递正确的属性吗？

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

还是用v-show来达到最好的效果会更好？

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

提前谢谢你！

【问题讨论】：

【解决方案1】：

TLDR： 两者都应该没问题，由此产生的性能差异应该可以忽略不计。

其他想法：

在性能方面，我认为渲染时间的差异可以忽略不计。作为个人喜好，第一个的用法对我来说似乎更有吸引力，因为它只在 DOM 中插入一个 <my-icon /> 元素，而不是两个并隐藏一个。

作为v-show 的替代方案，您可以使用v-if 条件指令甚至不渲染不会在DOM 中显示的元素，例如上面的两个。这将导致在 DOM 中一次只有一个，类似于示例一。下面是v-if的用法：

<my-icon v-if='!isPlaying' :icon='play'></my-icon>
<my-icon v-if='isPlaying' :icon='pause'></my-icon>

虽然这可能比 v-show 性能略高，因为不必将第二个非显示元素添加到 DOM，但差异可能也可以忽略不计。

【讨论】：

【解决方案2】：

更好的方法是删除 v-if 并使用计算将不同的值发送到 icon 属性

<my-icon :icon="getIcon"></my-icon>

export default {
 computed: {
  getIcon() {
   return isPlaying?'pause':'play':
  }
 }
}

通过上述方法，template部分只需一小行代码即可根据不同条件发送任意值

【讨论】：