Vue3组件基础，组合式vs选项式，怎么选才对？

刚接触Vue3组件的朋友，肯定会先纠结“到底用组合式API还是选项式API写”这个事吧？写出来的组件要么复用性差改起来要跑好几个文件，要么性能拉胯打包后体积超大，甚至还有一堆生命周期钩子堆在一起，连自己都看不懂半年前写的逻辑，别慌，今天就把我踩过的坑、总结的经验，还有从官方渠道、行业里常用的规范里扒出来的实用方法全说清楚，从新手能看懂的基础避坑，到老手追求的性能优化和复用升级，一步步来，保证看完你的Vue3组件能写得又顺又快。 很多人以为组合式API就是Vue3的“唯一正确打开方式”，一上来就硬套setup语法糖里的ref、reactive，结果把原本简单的逻辑写得绕来绕去，甚至出现数据响应丢失的问题，其实两种写法各有各的场景，先别忙着站队,搞清楚它们的适用范围再说。

选项式API：适合“一眼能看到底”的简单组件

选项式API就是我们Vue2里常用的那种，把data、methods、computed、watch这些逻辑按“功能块”分开，这种写法的优点是什么呢？就是逻辑分类特别明确，刚学前端或者刚从Vue2转过来的人，扫一眼就能知道“这个数据在data里改，那个计算逻辑在computed里写，点击事件放methods下面”，团队协作的时候哪怕不是写这个组件的人,也能快速上手改点小功能。

那它适合什么样的组件呢？比如只负责展示数据、偶尔触发个简单弹窗的卡片组件，或者结构固定、交互逻辑不超过3个的表单输入框，举个例子，做一个展示用户头像、昵称和签名的个人信息小卡片，用选项式API写的话，可能data里就放userInfo对象，computed里算一下签名是否太长需要加省略号，methods里加个点击头像跳转个人主页的方法，生命周期钩子可能只用个onMounted调接口拿数据，整个代码文件不超过100行,清清楚楚。

组合式API：复杂逻辑、高复用性组件的“救星”

但如果你的组件逻辑稍微复杂一点，比如一个带搜索、筛选、分页、排序、批量操作的数据表格，用选项式API的话就会出现“逻辑分散”的问题：搜索的逻辑在watch、computed、methods里都有，分页的逻辑又散在另几个地方，修改一个功能要上下翻好几百行,很容易漏改或者改错。

这时候组合式API的优势就出来了——它可以让你把相关的逻辑放在一起写，比如搜索相关的，你可以单独写一个useSearch的组合式函数，把搜索关键词、搜索触发的方法、搜索结果的暂存全放进去；分页相关的，再写一个usePagination，把当前页、每页条数、总页数这些全封装起来，然后在setup语法糖里直接调用这两个函数就行，这样一来，哪怕是上千行的复杂组件，逻辑也是模块化的,找起来改起来都特别方便。

还有一点，组合式API的复用性更强，刚才说的useSearch、usePagination，你完全可以把它们抽成单独的.ts文件，放在项目的composables文件夹里，以后做其他数据表格、列表页的时候直接拿过来用就行，不用再重新写一遍搜索分页的逻辑,大大提高了开发效率。

到底怎么选？别纠结，看这两个标准

1. 看逻辑复杂度：如果组件的逻辑块（比如数据展示、交互、生命周期调用）不超过3个，用选项式API；超过3个，或者逻辑之间有交叉关联,直接上组合式API。
2. 看复用需求：如果这个组件的某个逻辑（比如表单验证、搜索分页）可能在其他地方用到，不管简单还是复杂，都用组合式API,方便后期抽离复用。

Vue3组件核心：怎么解决组件间的通信问题？

组件通信可以说是Vue3组件开发中最常见的问题了，父子组件通信还好说，稍微懂点Vue的人都知道props和emit，但跨层级通信、兄弟组件通信、甚至是毫无关系的组件之间的通信呢？很多人一上来就用Vuex或者Pinia，把所有数据都放全局状态里，结果全局状态越来越臃肿，连自己都不知道哪个数据是哪个组件用的，反而增加了维护成本，其实Vue3给我们提供了很多种组件通信的方式，不同的场景选不同的方式,才是最优解。

父子组件通信：别只用props/emit，试试这些小技巧

父子组件通信是最基础的，props用来父传子，emit用来子传父，这个大家应该都知道,但这里面其实有很多小坑和小技巧。

父传子：props的“高级用法”和避坑指南

props一定要定义清楚类型、默认值和是否必填，别图省事直接写个props数组，比如你传一个用户信息的对象给子组件，如果只写props: ['userInfo']，那子组件拿到userInfo的时候根本不知道它里面有什么字段，字段的类型是什么，很容易出现undefined的问题，正确的写法应该是用对象形式定义props： （这里可以放一段代码，但不用标注Vue官方,就自然写出来）

// 子组件
defineProps({
  userInfo: {
    type: Object,
    required: true,
    // 注意：如果props的默认值是对象或者数组，一定要用函数返回，不然所有子组件会共享同一个引用
    default: () => ({
      id: '',
      nickname: '未知用户',
      avatar: '默认头像地址',
      signature: ''
    })
  },
  // 基本类型的默认值直接写就行
  showSignature: {
    type: Boolean,
    default: true
  }
})

这里要特别强调的一个坑：如果props的默认值是对象或者数组，必须用箭头函数或者普通函数返回一个新的实例，不然所有复用这个子组件的地方，都会共享同一个对象/数组的引用，修改其中一个子组件的数据，其他子组件的数据也会跟着变,这个问题找起来特别麻烦。

还有一个小技巧，就是用v-bind="$attrs"来传递“未定义在props里的属性”，比如你想给子组件的根元素加个class或者style，或者加个原生的click事件，不用在props里一个个定义，直接在父组件调用子组件的时候写上去，然后在子组件的根元素上加v-bind="$attrs"就行，但要注意，$attrs里默认是包含class和style的，如果你想让子组件自己控制根元素的class和style，可以在子组件里设置inheritAttrs: false，然后手动把$attrs里的class和style去掉,或者只传递你需要的属性。

子传父：别只传基本类型，试试传递事件对象和payload

子传父用emit，这个也很基础，但很多人传参数的时候只传一个基本类型，比如传个搜索关键词、传个选中的id，但有时候我们需要传递更多的信息，比如事件对象、表单数据对象等。

其实defineEmits和defineProps一样，也可以用对象形式定义，这样可以验证emit的参数类型,避免传错参数：

// 子组件
const emit = defineEmits({
  // 验证search事件必须传一个非空字符串
  search: (keyword: string) => keyword.trim() !== '',
  // 验证select事件必须传一个数字类型的id
  select: (id: number) => typeof id === 'number'
})
// 触发事件的时候可以传多个参数，也可以传对象
const handleSearch = () => {
  emit('search', searchKeyword.value, {
    page: 1,
    pageSize: 10
  })
}

这里还有一个小技巧，就是如果子组件的根元素是一个原生的表单元素或者按钮，你可以直接在父组件调用子组件的时候用v-model绑定，这样比手动写emit和props更方便，比如做一个自定义的输入框组件,你可以这样写：

// 子组件 CustomInput.vue
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const handleInput = (e: Event) => {
  emit('update:modelValue', (e.target as HTMLInputElement).value)
}

<!-- 父组件 -->
<CustomInput v-model="username" />
<!-- 等价于 -->
<CustomInput :modelValue="username" @update:modelValue="username = $event" />

对了，Vue3还支持多个v-model绑定,比如你可以给自定义的日期选择器组件绑定开始日期和结束日期：

<!-- 父组件 -->
<CustomDatePicker v-model:startDate="startDate" v-model:endDate="endDate" />

跨层级组件通信：别一上来就用Pinia，试试provide/inject

如果是爷孙组件或者更深层级的组件通信，用props一层一层传下去太麻烦了，这时候可以用provide和inject，provide是在祖先组件里提供数据，inject是在后代组件里注入数据，不管层级有多深,都能直接拿到。

provide/inject的用法也很简单：

// 祖先组件（比如App.vue）
import { ref, provide } from 'vue'
import { useUserStore } from '@/stores/user' // 如果数据很复杂，还是建议用Pinia
// 提供静态数据
provide('appName', '我的Vue3应用')
// 提供响应式数据（注意：如果提供的是ref或者reactive，后代组件拿到的也是响应式的）
const user = ref({
  id: '',
  nickname: ''
})
provide('currentUser', user)
// 提供方法
const updateUser = (newUser: any) => {
  user.value = newUser
}
provide('updateCurrentUser', updateUser)

// 后代组件（比如Header.vue）
import { inject } from 'vue'
// 注入数据，如果没有提供的话，用第二个参数作为默认值
const appName = inject('appName', '默认应用名')
const currentUser = inject('currentUser', ref({ nickname: '未知用户' }))
const updateCurrentUser = inject('updateCurrentUser', () => {})

这里要注意的两个点：

1. provide/inject默认是非响应式的，如果你想让后代组件拿到的数据是响应式的，必须在provide的时候传递ref或者reactive对象,不能传递普通的对象或者基本类型。
2. 尽量不要用provide/inject修改祖先组件的数据，除非你提供了专门的修改方法（比如上面的updateCurrentUser），不然数据的流向会变得不清晰，维护起来很困难，如果修改数据的逻辑比较复杂，或者数据需要在多个毫无关系的组件之间共享,还是用Pinia更合适。

兄弟组件通信：这三种方式你用过几种？

兄弟组件通信的话,常见的有三种方式：

1. 通过共同的父组件中转：如果兄弟组件之间的通信不频繁，或者逻辑比较简单，可以把数据放在共同的父组件里，子组件A通过emit把数据传给父组件,父组件修改数据后再通过props传给子组件B。
2. 通过事件总线（mitt）：如果兄弟组件之间没有共同的父组件，或者共同的父组件层级太深，可以用事件总线，Vue3里没有内置的事件总线了，但我们可以用第三方库mitt，它是一个轻量级的事件发射器，只有200字节左右,非常好用。
3. 通过Pinia全局状态：如果兄弟组件之间需要共享的数据比较多，或者通信比较频繁，直接用Pinia全局状态管理就行,这个是最省心的方式。

这里简单说一下mitt的用法： 首先安装mitt：

npm install mitt

然后创建一个eventBus.ts文件：

import mitt from 'mitt'
type Events = {
  // 定义事件类型，避免拼写错误
  'toggle-sidebar': void
  'refresh-data': {
    type: 'user' | 'order'
    id?: number
  }
}
const eventBus = mitt<Events>()
export default eventBus

然后在需要发送事件的组件里：

import eventBus from '@/utils/eventBus'
const toggleSidebar = () => {
  eventBus.emit('toggle-sidebar')
}

在需要接收事件的组件里：

import { onMounted, onUnmounted } from 'vue'
import eventBus from '@/utils/eventBus'
const handleToggleSidebar = () => {
  console.log('侧边栏切换了')
}
// 组件挂载的时候监听事件
onMounted(() => {
  eventBus.on('toggle-sidebar', handleToggleSidebar)
})
// 组件卸载的时候一定要移除监听，不然会造成内存泄漏
onUnmounted(() => {
  eventBus.off('toggle-sidebar', handleToggleSidebar)
})

Vue3组件进阶：怎么提高组件的复用性和可维护性？

组件的复用性和可维护性是衡量一个Vue3组件写得好不好的重要标准,下面就给大家分享几个常用的方法。

组合式函数（Composables）：Vue3复用逻辑的“终极武器”

刚才在讲组合式API的时候已经提到过组合式函数了，它就是把一些可复用的逻辑抽成单独的.ts文件，函数名一般以use开头，比如useSearch、usePagination、useFormValidation、useLocalStorage等。

下面举一个useLocalStorage的例子，这个函数可以用来存储和读取localStorage里的数据,而且支持响应式：

// composables/useLocalStorage.ts
import { ref, watch } from 'vue'
export function useLocalStorage<T>(key: string, defaultValue: T) {
  // 先从localStorage里读取数据，如果没有的话用默认值
  const storedValue = localStorage.getItem(key)
  const data = ref<T>(storedValue ? JSON.parse(storedValue) : defaultValue)
  // 监听data的变化，自动保存到localStorage里
  watch(data, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue))
  }, { deep: true }) // deep: true 表示深度监听对象和数组的变化
  // 返回data，供组件使用
  return data
}

然后在组件里直接调用就行：

// 组件里
import { useLocalStorage } from '@/composables/useLocalStorage'
// 存储用户的主题设置，默认是浅色模式
const theme = useLocalStorage<'light' | 'dark'>('app-theme', 'light')
// 切换主题
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}

组合式函数的优点是非常灵活，你可以把任何可复用的逻辑都抽成组合式函数，而且它和Vue的响应式系统完美结合，用起来和普通的ref/reactive没什么区别。

插槽（Slots）：Vue3组件“自定义内容”的法宝

插槽可以让你在组件内部预留一些位置，让父组件传递自定义的内容进去，这样可以大大提高组件的灵活性，Vue3的插槽和Vue2相比有一些改进，比如作用域插槽的写法更简洁了,还支持动态插槽名。

默认插槽

默认插槽是最简单的插槽，就是在组件内部用标签预留位置,父组件调用的时候直接在组件标签之间写内容就行：

<!-- 子组件 MyButton.vue -->
<button class="my-button">
  <slot>默认按钮文字</slot>
</button>

<!-- 父组件 -->
<MyButton>点击我</MyButton>
<!-- 如果父组件不写内容，就显示默认的“默认按钮文字” -->
<MyButton />

具名插槽

如果组件内部需要预留多个位置，就可以用具名插槽，就是给标签加个name属性：

<!-- 子组件 MyCard.vue -->
<div class="my-card">
  <div class="my-card-header">
    <slot name="header"></slot>
  </div>
  <div class="my-card-body">
    <slot></slot> <!-- 默认插槽，name是default -->
  </div>
  <div class="my-card-footer">
    <slot name="footer"></slot>
  </div>
</div>

<!-- 父组件 -->
<MyCard>
  <template #header>
    <h2>卡片标题</h2>
  </template>
  <p>卡片内容</p>
  <template #footer>
    <MyButton>确定</MyButton>
    <MyButton>取消</MyButton>
  </template>
</MyCard>

Vue3里具名插槽的写法是<template #插槽名>，比Vue2的