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
    }
  }
})