Vue3 defineComponent 使用指南：创建组件的工厂函数

Vue3 中的 defineComponent 函数是用来创建一个组件的工厂函数，类似于 Vue2.x 中的 Vue.extend() 函数。该函数返回一个组件选项对象，可以在其中定义组件的属性、方法、生命周期等。

defineComponent 函数的基本用法如下：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  methods: {
    handleClick() {
      console.log('Clicked!');
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="handleClick">Click me</button>
    </div>
  `
})

在这个例子中，我们通过 defineComponent 函数创建了一个名为 MyComponent 的组件，其中定义了组件的 data、methods 和 template 选项。在 template 中，我们使用了 Vue3 的新特性——单文件组件中的模板语法。

同时，我们还可以在组件选项对象中定义其它选项，比如 props、computed、watch 等。例如：

export default defineComponent({
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  computed: {
    upperTitle() {
      return this.title.toUpperCase();
    }
  },
  watch: {
    title(newValue, oldValue) {
      console.log(`Title changed from ${oldValue} to ${newValue}`);
    }
  },
  // ...
})

defineComponent 函数的另一个重要特性是支持类型推断。在使用 TypeScript 开发时，我们可以通过 defineComponent 函数的泛型参数来指定组件的 props 类型。例如：

import { defineComponent } from 'vue';

interface Props {
  title: string;
  content: string;
}

export default defineComponent<Props>({ 
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    }
  },
  // ...
})

通过这种方式，我们可以在编写组件时获得类型检查和自动补全的支持，提高开发效率和代码质量。