全栈编程

Vue 3 组件设计模式与最佳实践

Vue 3 组件设计模式与最佳实践

前言

组件是Vue应用程序的构建块，良好的组件设计模式对于构建可维护、可扩展的应用至关重要。Vue 3提供了Composition API等新特性，使得组件设计更加灵活和强大。本文将详细介绍Vue 3中的组件设计模式和最佳实践，帮助开发者构建高质量的Vue应用。

一、组件设计原则

1. 单一职责原则

每个组件应该只负责一个功能，这样可以使组件更加专注、可测试和可维护：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!-- 好的做法：专注于单一功能 -->
<template>
  <button class="primary-button" @click="$emit('click')">
    <slot></slot>
  </button>
</template>

<script setup>
export default {
  name: 'PrimaryButton'
}
</script>

<style scoped>
.primary-button {
  /* 样式定义 */
}
</style>

2. 可复用性优先

设计组件时，应该考虑其可复用性，避免过度耦合特定业务逻辑：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!-- 可复用的表单输入组件 -->
<template>
  <div class="form-input">
    <label v-if="label" class="form-input-label">{{ label }}</label>
    <input
      :type="type"
      :value="modelValue"
      @input="updateValue"
      :placeholder="placeholder"
      :disabled="disabled"
      :class="{ 'error': hasError }"
    />
    <span v-if="errorMessage" class="error-message">{{ errorMessage }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  errorMessage: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const hasError = computed(() => !!props.errorMessage)

function updateValue(event) {
  emit('update:modelValue', event.target.value)
}
</script>

3. 渐进式复杂度

组件设计应遵循渐进式复杂度原则，从简单到复杂逐步构建：

  • 基础组件：如按钮、输入框、标签等
  • 业务组件：如表单、表格、对话框等
  • 页面组件：特定页面的组合组件

4. 可访问性

确保组件对所有用户可访问，包括使用屏幕阅读器的用户：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<template>
  <button 
    :aria-label="ariaLabel"
    :aria-pressed="pressed"
    role="button"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script setup>
const props = defineProps({
  ariaLabel: {
    type: String,
    default: ''
  },
  pressed: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

function handleClick(event) {
  emit('click', event)
}
</script>

二、组件设计模式

1. 容器组件与展示组件模式

将组件分为容器组件（处理逻辑）和展示组件（处理UI）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<!-- 展示组件 TodoItem.vue -->
<template>
  <div class="todo-item" :class="{ completed: todo.completed }">
    <input 
      type="checkbox" 
      :checked="todo.completed" 
      @change="onToggle"
    />
    <span class="todo-text">{{ todo.text }}</span>
    <button class="delete-btn" @click="onDelete">删除</button>
  </div>
</template>

<script setup>
const props = defineProps({
  todo: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['toggle', 'delete'])

function onToggle() {
  emit('toggle', props.todo.id)
}

function onDelete() {
  emit('delete', props.todo.id)
}
</script>

<!-- 容器组件 TodoList.vue -->
<template>
  <div class="todo-list">
    <h2>待办事项列表</h2>
    <TodoItem 
      v-for="todo in todos" 
      :key="todo.id" 
      :todo="todo"
      @toggle="toggleTodo"
      @delete="deleteTodo"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import TodoItem from './TodoItem.vue'

const todos = ref([])

onMounted(() => {
  // 获取数据逻辑
  fetchTodos()
})

async function fetchTodos() {
  try {
    const response = await fetch('/api/todos')
    todos.value = await response.json()
  } catch (error) {
    console.error('获取待办事项失败:', error)
  }
}

function toggleTodo(id) {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.completed = !todo.completed
    // 更新API逻辑...
  }
}

function deleteTodo(id) {
  todos.value = todos.value.filter(t => t.id !== id)
  // 更新API逻辑...
}
</script>

2. 高阶组件模式

在Vue 3中，可以使用组合式函数（Composables）来实现类似高阶组件的功能：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// useLoading.js
import { ref } from 'vue'

export function useLoading() {
  const isLoading = ref(false)
  
  const withLoading = async (fn) => {
    isLoading.value = true
    try {
      const result = await fn()
      return result
    } finally {
      isLoading.value = false
    }
  }
  
  return {
    isLoading,
    withLoading
  }
}

使用组合式函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<template>
  <div class="data-fetcher">
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-else-if="data" class="data">
      {{ data }}
    </div>
    <button @click="fetchData" :disabled="isLoading">获取数据</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useLoading } from './useLoading'

const { isLoading, withLoading } = useLoading()
const data = ref(null)

async function fetchData() {
  const result = await withLoading(async () => {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    return { id: 1, name: '示例数据' }
  })
  
  data.value = result
}
</script>

3. 渲染函数模式

使用渲染函数创建高度灵活的组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<script setup>
import { h } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'div'
  },
  color: {
    type: String,
    default: 'primary'
  },
  size: {
    type: String,
    default: 'medium'
  }
})

const emit = defineEmits(['click'])

defineOptions({
  render() {
    return h(
      props.type,
      {
        class: [
          'custom-element',
          `color-${props.color}`,
          `size-${props.size}`
        ],
        onClick: (event) => emit('click', event)
      },
      this.$slots.default ? this.$slots.default() : []
    )
  }
})
</script>

<style>
.custom-element {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.color-primary {
  background-color: #42b983;
  color: white;
}

.color-secondary {
  background-color: #3498db;
  color: white;
}

.size-small {
  font-size: 12px;
  padding: 4px 8px;
}

.size-medium {
  font-size: 14px;
  padding: 8px 16px;
}

.size-large {
  font-size: 16px;
  padding: 12px 24px;
}
</style>

4. 插槽模式

使用插槽创建灵活可配置的组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<template>
  <div class="card">
    <div v-if="$slots.header" class="card-header">
      <slot name="header"></slot>
    </div>
    
    <div class="card-body">
      <slot></slot>
    </div>
    
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
export default {
  name: 'Card'
}
</script>

<style scoped>
.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}

.card-body {
  padding: 16px;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}
</style>

<!-- 使用示例 -->
<!-- 
<Card>
  <template #header>
    <h2>卡片标题</h2>
  </template>
  <p>这是卡片的主要内容区域</p>
  <template #footer>
    <button>操作按钮</button>
  </template>
</Card>
 -->

5. 依赖注入模式

使用依赖注入创建可配置的组件树：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!-- 父组件 ConfigProvider.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script setup>
import { provide } from 'vue'

const props = defineProps({
  theme: {
    type: String,
    default: 'light'
  },
  locale: {
    type: String,
    default: 'zh-CN'
  },
  size: {
    type: String,
    default: 'medium'
  }
})

provide('appConfig', props)
</script>

<!-- 子组件 ThemedButton.vue -->
<template>
  <button 
    class="themed-button" 
    :class="[`theme-${theme}`, `size-${size}`]"
    @click="$emit('click')"
  >
    <slot></slot>
  </button>
</template>

<script setup>
import { inject } from 'vue'

const emit = defineEmits(['click'])

const config = inject('appConfig', {
  theme: 'light',
  size: 'medium'
})

const { theme, size } = config
</script>

<style scoped>
.themed-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.theme-light {
  background-color: white;
  color: #333;
  border: 1px solid #e0e0e0;
}

.theme-dark {
  background-color: #333;
  color: white;
}

.size-small {
  font-size: 12px;
  padding: 4px 8px;
}

.size-medium {
  font-size: 14px;
  padding: 8px 16px;
}

.size-large {
  font-size: 16px;
  padding: 12px 24px;
}
</style>

<!-- 使用示例 -->
<!-- 
<ConfigProvider theme="dark" size="large">
  <div>
    <ThemedButton>暗主题大按钮</ThemedButton>
  </div>
</ConfigProvider>
 -->

三、组件通信模式

1. Props 和 Emits

最基本的父子组件通信方式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!-- 子组件 Child.vue -->
<template>
  <div class="child">
    <p>父组件传递的值: {{ message }}</p>
    <button @click="sendMessage">向父组件发送消息</button>
  </div>
</template>

<script setup>
const props = defineProps({
  message: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update-message'])

function sendMessage() {
  emit('update-message', '来自子组件的消息')
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <div class="parent">
    <h2>父组件</h2>
    <Child 
      :message="parentMessage" 
      @update-message="handleUpdateMessage"
    />
    <p>子组件发送的消息: {{ childMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const parentMessage = ref('Hello from parent')
const childMessage = ref('')

function handleUpdateMessage(message) {
  childMessage.value = message
}
</script>

2. v-model 双向绑定

使用 v-model 实现双向数据绑定：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!-- 子组件 CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="updateValue"
    :placeholder="placeholder"
  />
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

function updateValue(event) {
  emit('update:modelValue', event.target.value)
}
</script>

<!-- 父组件 Form.vue -->
<template>
  <div class="form">
    <h2>表单示例</h2>
    <CustomInput v-model="inputValue" placeholder="请输入内容" />
    <p>输入的值: {{ inputValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const inputValue = ref('')
</script>

3. Provide / Inject

跨层级组件通信：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!-- 祖先组件 -->
<script setup>
import { provide, ref } from 'vue'

const user = ref({
  name: '张三',
  role: 'admin'
})

provide('currentUser', user)
</script>

<!-- 深层子组件 -->
<script setup>
import { inject } from 'vue'

const currentUser = inject('currentUser')
</script>

4. 事件总线

使用Vue 3的事件总线模式进行非父子组件通信：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// eventBus.js
import { ref } from 'vue'

const events = ref({})

export function useEventBus() {
  function on(event, callback) {
    if (!events.value[event]) {
      events.value[event] = []
    }
    events.value[event].push(callback)
  }
  
  function off(event, callback) {
    if (!events.value[event]) return
    
    if (callback) {
      events.value[event] = events.value[event].filter(cb => cb !== callback)
    } else {
      delete events.value[event]
    }
  }
  
  function emit(event, ...args) {
    if (!events.value[event]) return
    
    events.value[event].forEach(callback => {
      callback(...args)
    })
  }
  
  return {
    on,
    off,
    emit
  }
}

使用事件总线：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<script setup>
import { useEventBus } from './eventBus'

const { on, emit } = useEventBus()

// 监听事件
on('userLoggedIn', (userData) => {
  console.log('用户登录:', userData)
})

// 触发事件
function login() {
  emit('userLoggedIn', { id: 1, name: '张三' })
}
</script>

四、组件性能优化

1. 组件缓存

使用 <KeepAlive> 组件缓存不活跃的组件实例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<template>
  <div>
    <button @click="activeComponent = 'A'">组件 A</button>
    <button @click="activeComponent = 'B'">组件 B</button>
    
    <KeepAlive>
      <component :is="activeComponent" />
    </KeepAlive>
  </div>
</template>

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

const activeComponent = ref('A')
</script>

2. 延迟加载组件

使用动态导入延迟加载大型组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<script setup>
import { defineAsyncComponent } from 'vue'

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

// 带加载状态和错误处理的异步组件
const AsyncComponentWithOptions = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})
</script>

3. 避免不必要的渲染

使用 v-memo 指令优化列表渲染性能：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <div class="todo-list">
    <div
      v-for="todo in todos"
      :key="todo.id"
      v-memo="[todo.id, todo.completed]"
      class="todo-item"
      :class="{ completed: todo.completed }"
    >
      {{ todo.text }}
    </div>
  </div>
</template>

4. 使用响应式API优化

合理使用响应式API，避免不必要的响应式开销：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { ref, shallowRef, markRaw } from 'vue'

// 对于简单值使用 ref
const count = ref(0)

// 对于大对象，使用 shallowRef 避免深层响应式
const largeObject = shallowRef({ /* 大数据对象 */ })

// 对于不需要响应式的对象，使用 markRaw
const nonReactiveObject = markRaw({
  heavyFunction: () => { /* 复杂计算 */ }
})

五、组件测试

1. 单元测试

使用 Vitest 测试 Vue 组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// MyComponent.test.js
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = mount(MyComponent, {
      props: {
        message: 'Hello'
      }
    })
    
    expect(wrapper.text()).toContain('Hello')
  })
  
  it('should emit event when clicked', async () => {
    const wrapper = mount(MyComponent)
    
    await wrapper.find('button').trigger('click')
    
    expect(wrapper.emitted('my-event')).toBeTruthy()
  })
})

2. 组件快照测试

使用快照测试确保组件渲染一致性：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// MyComponent.test.js
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('matches snapshot', () => {
    const wrapper = mount(MyComponent, {
      props: {
        message: 'Snapshot test'
      }
    })
    
    expect(wrapper.html()).toMatchSnapshot()
  })
})

六、组件库开发最佳实践

1. 组件类型定义

为组件提供完整的 TypeScript 类型定义：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// ButtonProps.ts
export interface ButtonProps {
  type?: 'primary' | 'secondary' | 'danger' | 'success'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
  icon?: string
}

// Button.vue
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { ButtonProps } from './types'

const props = withDefaults(defineProps<ButtonProps>(), {
  type: 'primary',
  size: 'medium',
  disabled: false,
  loading: false
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()
</script>

2. 主题定制

设计支持主题定制的组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/* variables.scss */
:root {
  // 主色调
  --primary-color: #42b983;
  --secondary-color: #3498db;
  
  // 文本颜色
  --text-primary: #333;
  --text-secondary: #666;
  
  // 边框颜色
  --border-color: #e0e0e0;
  
  // 尺寸
  --border-radius: 4px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

/* button.scss */
.button {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background-color: white;
  color: var(--text-primary);
  
  &.primary {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }
}

3. 组件文档

为组件提供详细的文档：

1
2
3
4
5
6
7
8

# Button 按钮

## 基本用法

<Button>默认按钮</Button>

```vue
<Button>默认按钮</Button>

属性

属性名 类型 默认值 说明
type string ‘primary’ 按钮类型：‘primary’, ‘secondary’, ‘danger’, ‘success’
size string ‘medium’ 按钮大小：‘small’, ‘medium’, ’large’
disabled boolean false 是否禁用

事件

事件名 参数 说明
click MouseEvent 点击事件 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


### 4. 国际化支持

设计支持多语言的组件：

```javascript
// i18n.js
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    button: {
      submit: 'Submit',
      cancel: 'Cancel',
      confirm: 'Confirm'
    }
  },
  zh: {
    button: {
      submit: '提交',
      cancel: '取消',
      confirm: '确认'
    }
  }
}

const i18n = createI18n({
  locale: 'zh',
  messages
})

export default i18n

使用国际化：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <div>
    <button>{{ t('button.submit') }}</button>
    <button>{{ t('button.cancel') }}</button>
  </div>
</template>

总结

本文详细介绍了Vue 3中的组件设计模式和最佳实践，包括组件设计原则、常用的设计模式、组件通信方式、性能优化和测试方法等。通过遵循这些最佳实践，我们可以构建更加可维护、可复用和高性能的Vue应用。

主要内容回顾：

  1. 组件设计原则：单一职责、可复用性优先、渐进式复杂度和可访问性
  2. 组件设计模式：容器组件与展示组件、高阶组件、渲染函数、插槽模式和依赖注入模式
  3. 组件通信模式：Props和Emits、v-model双向绑定、Provide/Inject和事件总线
  4. 组件性能优化：组件缓存、延迟加载、避免不必要渲染和响应式API优化
  5. 组件测试：单元测试和快照测试
  6. 组件库开发最佳实践：类型定义、主题定制、组件文档和国际化支持

在实际开发中，我们应该根据项目的具体需求选择合适的设计模式和最佳实践，并不断优化和调整组件设计，以构建高质量的Vue应用。

comments powered by Disqus
© 2020 - 2025 miroliu
使用 Hugo 构建
主题 Stack 由 Jimmy 设计