defineComponent 简明介绍

1. 是什么？

defineComponent 是 Vue 3 中定义组件的核心函数。

2. 基本用法

// 1. 最简单的组件定义
export default defineComponent({
  name: 'MyComponent',
  setup() {
    return {}
  }
})

3. 两种写法

3.1 Options API（选项式 API ∈ Vue 2 风格 ）

export default defineComponent({
  // 组件名
  name: 'MyComponent',

  // 组件属性
  props: {
    title: String,
    count: Number
  },

  // 数据
  data() {
    return {
      message: 'Hello'
    }
  },

  // 计算属性
  computed: {
    upperMessage() {
      return this.message.toUpperCase()
    }
  },

  // 方法
  methods: {
    sayHello() {
      console.log(this.message)
    }
  },

  // 生命周期
  mounted() {
    console.log('组件已挂载')
  }
})

3.2 Composition API（组合式 API ∈ Vue 3 推荐）

import { ref, computed, onMounted } from 'vue'

export default defineComponent({
  name: 'MyComponent',

  props: {
    title: String
  },

  setup(props) {
    // 响应式数据
    const count = ref(0)
    const message = ref('Hello')

    // 计算属性
    const doubleCount = computed(() => count.value * 2)

    // 方法
    const increment = () => {
      count.value++
    }

    // 生命周期
    onMounted(() => {
      console.log('组件已挂载')
    })

    // 返回给模板使用
    return {
      count,
      message,
      doubleCount,
      increment
    }
  }
})

4. 主要优势

4.1 类型安全（TypeScript）

// defineComponent 提供完整的类型推断
const MyComponent = defineComponent({
  props: {
    // 明确的类型定义
    title: { type: String, required: true },
    count: { type: Number, default: 0 }
  },

  // ✅ 自动获得类型提示
  setup(props) {
    console.log(props.title)  // 类型推断为 string
    console.log(props.count)  // 类型推断为 number
  }
})

4.2 更好的 IDE 支持

• 自动补全
• 类型检查
• 重构支持
• 文档提示

5. 实际使用示例

5.1 计数器组件

<!-- Counter.vue -->
<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Counter',

  props: {
    initialValue: {
      type: Number,
      default: 0
    }
  },

  setup(props) {
    const count = ref(props.initialValue)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
})
</script>

6. 为什么使用 defineComponent？

7. 一句话总结

defineComponent 是 Vue 3 定义组件的标准方式，提供类型安全和更好的开发体验。

8. 使用建议

1. 总是使用 defineComponent 定义组件
2. 新项目用 Composition API
3. 迁移项目可用 Options API
4. 搭配 TypeScript 效果最好