Changes to the Dynamic Components API

Dynamic Component API Changes

Vue.js 3.0 introduced significant adjustments to the dynamic component API, removing the implicit component registration logic of <component :is> and enforcing explicit registration instead. This change affects the behavior patterns of dynamic components during both compilation and runtime.

Old vs. New API Comparison

In Vue 2.x, dynamic components could be used like this:

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

<script>
export default {
  data() {
    return {
      currentComponent: 'MyComponent'
    }
  }
}
</script>

Vue 3.x requires explicit component registration:

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

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      currentComponent: 'MyComponent'
    }
  }
}
</script>

Key Changes

1. Component Resolution Logic Change:

   • Vue 2.x automatically looked up components in the parent component context
   • Vue 3.x requires components to be explicitly registered via the components option

2. Dynamic Import Support: Added direct support for async components:

const AsyncComponent = defineAsyncComponent(() => 
  import('./AsyncComponent.vue')
)

3. Component Name Handling: Now strictly distinguishes between PascalCase and kebab-case:

<!-- Valid -->
<component :is="MyComponent" />

<!-- Invalid -->
<component :is="my-component" />

Migration Strategy

For scenarios requiring dynamic switching of many components, consider global registration or factory pattern:

// Global registration approach
app.component('ComponentA', ComponentA)
app.component('ComponentB', ComponentB)

// Factory pattern approach
const componentMap = {
  ComponentA,
  ComponentB
}

const getDynamicComponent = (name) => {
  return componentMap[name] || null
}

Advanced Usage Example

Dynamic component management with Composition API:

<script setup>
import { shallowRef } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const components = {
  ComponentA,
  ComponentB
}
const currentComponent = shallowRef(components.ComponentA)

function toggleComponent() {
  currentComponent.value = 
    currentComponent.value === components.ComponentA 
      ? components.ComponentB 
      : components.ComponentA
}
</script>

<template>
  <component :is="currentComponent" />
  <button @click="toggleComponent">Toggle Component</button>
</template>

Performance Optimization Tips

1. Use shallowRef instead of ref for storing component references
2. For frequent switching scenarios, consider maintaining component instances:

<template>
  <component 
    :is="currentComponent" 
    v-if="showComponent"
    :key="componentKey"
  />
</template>

3. Utilize keep-alive to cache component state:

<keep-alive>
  <component :is="currentComponent" />
</keep-alive>

Type System Support

TypeScript requires explicit type definitions:

interface ComponentMap {
  [key: string]: Component
}

const components: ComponentMap = {
  ComponentA,
  ComponentB
}

const currentComponent = ref<Component>(components.ComponentA)

Common Issue Solutions

Issue 1: Dynamic component names from API responses

// Solution: Pre-register all possible components
const ALL_COMPONENTS = {
  UserProfile: () => import('./UserProfile.vue'),
  ProductCard: () => import('./ProductCard.vue')
}

const currentComponent = computed(() => {
  return ALL_COMPONENTS[apiResponse.componentName]
})

Issue 2: Need to support unknown components

// Create fallback component
const UnknownComponent = {
  template: `<div>Unknown Component</div>`
}

const resolveComponent = (name) => {
  return registeredComponents[name] || UnknownComponent
}

Render Function Syntax

Adjustments when using render functions:

import { h } from 'vue'

export default {
  render() {
    return h(this.currentComponent)
  }
}

Integration with Vue Router

Combining dynamic components with route views:

<template>
  <component :is="route.meta.layoutComponent || DefaultLayout">
    <router-view />
  </component>
</template>

Enterprise-Level Practices

Dynamic component architecture for large projects:

1. Create a central component registry:

// components/registry.js
export const componentRegistry = new Proxy({}, {
  get(target, name) {
    if (!target[name]) {
      target[name] = defineAsyncComponent(() => 
        import(`@/components/${name}.vue`)
      )
    }
    return target[name]
  }
})

2. Usage in application:

<script setup>
import { componentRegistry } from './components/registry'

const currentComponent = computed(() => {
  return componentRegistry[props.componentName]
})
</script>