Vue3原子化设计实战：构建高性能动态组件生态系统

一、原子化架构原理

基于组合式API的组件分子模型：

// atoms/Button.vue
<script setup>
defineProps({
  variant: {
    type: String,
    default: 'primary',
    validator: val => ['primary','secondary','danger'].includes(val)
  },
  size: {
    type: String,
    default: 'md',
    validator: val => ['sm','md','lg'].includes(val)
  }
})
</script>

<template>
  <button 
    class="atom-button"
    :class="[`variant-${variant}`, `size-${size}`]"
    v-bind="$attrs"
  >
    <slot />
  </button>
</template>

// molecules/FormField.vue
<script setup>
import Button from '../atoms/Button.vue'
import Input from '../atoms/Input.vue'

defineProps({
  label: String,
  modelValue: [String, Number],
  buttonText: String
})
</script>

<template>
  <div class="molecule-form-field">
    <label>{{ label }}</label>
    <div class="input-group">
      <Input :modelValue="modelValue" />
      <Button v-if="buttonText">{{ buttonText }}</Button>
    </div>
  </div>
</template>

核心优势：高复用性、低耦合度、性能优化、维护便捷

二、动态组件系统

1. 组件动态注册

// components/registry.js
const componentMap = new Map()

export function registerComponent(name, component) {
  componentMap.set(name, component)
}

export function getComponent(name) {
  return componentMap.get(name)
}

// 自动注册原子组件
const atomFiles = import.meta.glob('./atoms/*.vue')
for (const path in atomFiles) {
  const name = path.split('/').pop().replace('.vue', '')
  atomFiles[path]().then(mod => {
    registerComponent(`Atom${name}`, mod.default)
  })
}

// 动态组件渲染器
<script setup>
import { getComponent } from './registry'
import { shallowRef, watchEffect } from 'vue'

const props = defineProps({
  name: String,
  config: Object
})

const component = shallowRef(null)
watchEffect(() => {
  component.value = getComponent(props.name)
})
</script>

<template>
  <component 
    :is="component"
    v-bind="config"
    v-if="component"
  />
</template>

2. 运行时组件组合

// 组件组合器
export function useComponentComposer() {
  const components = reactive({})
  
  const addComponent = (name, config) => {
    components[name] = {
      ...config,
      id: nanoid()
    }
  }
  
  const renderComposed = () => {
    return Object.entries(components).map(([name, config]) => (
      h(resolveComponent(name), {
        key: config.id,
        ...config.props
      })
    )
  }
  
  return { addComponent, renderComposed }
}

// 使用示例
const { addComponent, renderComposed } = useComponentComposer()

addComponent('AtomButton', {
  props: {
    variant: 'primary',
    onClick: () => console.log('Clicked!')
  }
})

addComponent('MoleculeFormField', {
  props: {
    label: '用户名',
    modelValue: ''
  }
})

三、CMS系统实战案例

1. 可视化页面构建器

// 页面构建器核心逻辑
export function usePageBuilder() {
  const pageSchema = ref([])
  const activeComponent = ref(null)
  
  // 从JSON schema渲染页面
  const renderFromSchema = (schema) => {
    return schema.map(item => {
      const component = getComponent(item.component)
      return h(component, {
        ...item.props,
        key: item.id,
        'onUpdate:modelValue': (val) => {
          item.props.modelValue = val
        }
      })
    })
  }
  
  // 添加新组件
  const addComponent = (name) => {
    const id = nanoid()
    pageSchema.value.push({
      id,
      component: name,
      props: getDefaultProps(name)
    })
    activeComponent.value = id
  }
  
  // 生成可保存的schema
  const generateSchema = () => {
    return JSON.parse(JSON.stringify(pageSchema.value))
  }
  
  return { pageSchema, activeComponent, renderFromSchema, addComponent, generateSchema }
}