Vue.js Vue 2中的动态组件和条件渲染

最近我用Vue 2玩了动态组件

假设有两个组件SignIn和SignOut必须有条件地呈现

import SignIn from '~/components/SignIn.vue
import SignUp from '~/components/SignUp.vue

export default {
components: {
  SignOut,
  SignIn
}
data() {
  return { 
    condition: true
  }
}

我通常使用Vue条件渲染模式，如下所示：

<template>
  <SignIn v-if="condition" />
  <SignUp v-else />
</template>
  

但我可以用动态组件模式获得相同的结果

<script>
data() {
  return {
    condition: true,
    component: this.condition ? 'SignIn' : 'SignUp'
  }
}
</script>

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

数据（）{
返回{
条件:对,，
组件：this.condition？'SignIn'：'SignUp'
}
}

---

您对此有何看法？

如果在多个组件之间切换，则动态模板代码更少。但对于两个组件，

v-if

更容易一眼就能理解其用途。如果在多个组件之间切换，则动态模板代码更少。但对于两个人来说，

v-if

更容易一眼就能理解目的。