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

Question

最近我用 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>

你对此有何看法？

Answer 1

条件渲染（v-if）：

在这种情况下，通过 v-if 进行条件渲染是不错的选择，因为它的选项非常有限，例如两个组件，它们的调用速度比动态组件模式更快。

了解更多详情：https://vuejs.org/guide/essentials/conditional.html

动态组件模式：

这在组件较多的情况下非常有用，因为它看起来更干净并且不受有限选项的限制。

了解更多详情：https://blog.logrocket.com/making-components-dynamic-vue-3#dynamic-components-syntax