別再使用v-if了

在公司看到這種代碼，

<template>
  <div>
    <HelloWorld v-if="vdom.tag=='HelloWorld'" :data="vdom.data"></HelloWorld>
    <GoodWorld v-if="vdom.tag=='GoodWorld'" :data="vdom.data"></GoodWorld>
    <BadWorld v-if="vdom.tag=='BadWorld'" :data="vdom.data"></BadWorld>
    <BadWorld v-if="vdom.tag=='BadWorld'" :data="vdom.data"></BadWorld>
    <MetaWorld v-if="vdom.tag=='MetaWorld'" :data="vdom.data"></MetaWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue';
import GoodWorld from '@/components/GoodWorld.vue';
import BadWorld from '@/components/BadWorld.vue';
import MetaWorld from '@/components/MetaWorld.vue';

export default {
  components: {
    HelloWorld,
    GoodWorld
  },
  props: {
    vdom: Object
  }
}
</script>

應該不需要解釋為甚麼以上寫法不好吧，請使用render函數。

<script>
import HelloWorld from '@/components/HelloWorld.vue';
import GoodWorld from '@/components/GoodWorld.vue';
import BadWorld from '@/components/BadWorld.vue';
import MetaWorld from '@/components/MetaWorld.vue';

const reflection = {
  "HelloWorld": HelloWorld,
  "GoodWorld": GoodWorld,
  "BadWorld": BadWorld,
  "MetaWorld": MetaWorld,
}
export default {
  components: {
    HelloWorld,
    GoodWorld
  },
  props: {
    vdom: Object
  },
  render(h) {
    return h(reflection[this.vdom.tag], {props: { data: vdom.data }});
  }
}
</script>