使用 defineComponent 创建 Vue 3 组件

在 Vue 3 中，defineComponent 是一个非常重要的功能，它为组件的定义提供了更清晰、更类型安全的方式。特别是在 TypeScript 环境中，defineComponent 的使用能够极大地提升代码的可读性和可维护性。本文将深入探讨 defineComponent 的使用，并提供一个示例来演示它的实际应用。

什么是 `defineComponent`？

defineComponent 是 Vue 3 中 Composition API 的一部分，它用于定义一个 Vue 组件。相较于 Vue 2.x 中的 Vue.extend，defineComponent 更加简洁并且与 TypeScript 更好地集成。使用它可以让我们在编写组件时，获得更好的类型推导和错误提示。

基本语法

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    // props 定义
  },
  setup(props) {
    // 组件逻辑
    return {
      // 返回的属性和方法
    };
  },
});

`defineComponent` 的优势

类型安全：在 TypeScript 中，defineComponent 能够为组件的 props、data 和 methods 提供类型推导，减少运行时错误。
简化组件定义：代码结构更加清晰，减少了额外的样板代码。
与 Composition API 结合：setup 函数提供了一个统一的地方来处理组件的逻辑、状态和生命周期。

实际案例：创建一个计数器组件

1. 创建项目

首先，确保你已经安装了 Vue CLI。如果没有，可以使用以下命令安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 3 项目：

vue create my-vue-app

选择默认配置，进入项目目录：

cd my-vue-app

2. 创建计数器组件

在 src/components 目录下创建一个新的文件 Counter.vue，并使用 defineComponent 来定义组件。

<template>
  <div>
    <h1>{
   
   { title }}</h1>
    <p>Current Count: {
   
   { count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

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

const props = defineProps<{
  title: string;
}>();

const count = ref(0);

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

const decrement = () => {
  count.value--;
};
</script>

3. 组件解析

模板部分：显示标题、当前计数以及两个按钮（增减）。
script setup 部分：
- 使用 defineProps 定义组件的 props，这里我们定义了一个 title 属性。
- 使用 ref 创建一个响应式变量 count，并定义了两个方法 increment 和 decrement 来修改计数。

4. 在应用中使用组件

打开 src/App.vue，并引入刚刚创建的 Counter 组件：

<template>
  <div id="app">
    <Counter title="Counter Example" />
  </div>
</template>

<script setup lang="ts">
import Counter from './components/Counter.vue';
</script>

<style>
/* 样式可以自定义 */
</style>