vue.js - 是特殊属性 vs v-if/v-show

Question

is special attribute是:

<!-- Component changes when currentTabComponent changes -->
<component v-bind:is="currentTabComponent"></component>

conditional rendering是:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

我知道使用 v-if 之间的区别和 v-show ，但我不知道使用 v-if 列表之间的区别s 用于不同情况与使用 is特殊属性。我应该什么时候使用它们？

是否 is像 v-if 一样工作或 v-show ?我的意思是，它会渲染所有组件吗？是 is就像后续 v-if 列表的语法糖?

Answer 1

is如果 v-if 的列表会很有用如果为真，s 将全部渲染一个组件。

像这样:

<template v-if="component == "firstComponent">
    <first-component></first-component>
<template v-else-if="component == "secondComponent">
    <second-component></second-component>
</template>
<template v-else-if="component == "thirdComponent">
    <third-component></third-component>
</template>

这可以简化为:

<component :is="component"></component>

关于你的第二个问题

天气 component :is像 v-if或 v-show取决于您是否将其包裹在 <keep-alive> 中或不。阅读有关此 here 的文档.但请注意，使用 <component>一个组件只会在第一次需要之前创建，无论您使用 <keep-alive>或不。

所以:

v-if每次满足条件时(重新)创建组件。

<component :is="...">每次满足条件时都会创建组件(如 v-if )。

<keep-alive><component :is="..."></keep-alive>创建
组件最多 1 次(但可能为 0)。

一个只有 v-show 的组件在它上面只创建一次。