vue3+ts 评论组件

Vue3是一种流行的JavaScript框架，而TypeScript是一种类型安全的JavaScript超集。结合使用Vue3和TypeScript可以提供更好的开发体验和代码可维护性。

在Vue3中，可以使用TypeScript来编写组件。下面是一个简单的Vue3+TypeScript评论组件的示例：

<template>
  <div>
    <h2>评论列表</h2>
    <ul>
      <li v-for="comment in comments" :key="comment.id">
        {{ comment.text }}
      </li>
    </ul>
    <form @submit.prevent="addComment">
      <input type="text" v-model="newComment" placeholder="请输入评论" />
      <button type="submit">添加评论</button>
    </form>
  </div>
</template>

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

interface Comment {
  id: number;
  text: string;
}

export default defineComponent({
  name: 'CommentComponent',
  data() {
    return {
      comments: [] as Comment[],
      newComment: '',
    };
  },
  methods: {
    addComment() {
      const newId = this.comments.length + 1;
      this.comments.push({ id: newId, text: this.newComment });
      this.newComment = '';
    },
  },
});
</script>

在上面的示例中，我们定义了一个名为`CommentComponent`的Vue组件。组件包含一个评论列表和一个表单用于添加新的评论。`comments`数组用于存储评论数据，`newComment`变量用于绑定输入框的值。

通过使用`defineComponent`函数和`ref`函数，我们可以定义组件的数据和方法，并将其导出供其他组件使用。

相关问题:
1. Vue3是什么？
2. TypeScript在Vue3中的作用是什么？
3. 请解释一下Vue3+TypeScript评论组件的代码逻辑。