<script lang="ts" setup>作用

`<script lang="ts" setup>` 是Vue 3中引入的一种新的组件编写方式，它结合TypeScript（TS）语法，允许你在JavaScript的setup函数中定义组件的行为和状态。这个特性简化了组件内部的状态管理和生命周期钩子的使用。

1. **声明式状态管理**[^1]：
- `defineProps` 函数用于声明组件接收的props（属性），如`msg`和`title`，并可以指定默认值。这使得组件具有可配置性，但同时也保证了默认行为。

   withDefaults(defineProps<{ msg: string; title: string }>(), { msg: "哈哈哈", title: "学习中ing" })

这意味着组件会自动获得这些prop的默认值，除非它们在父组件中被明确地传递。

2. **选项API的集成**：
- `defineOptions` 函数用于定义组件的选项，如组件的名字，这是在组件实例化时可以访问的对象。

   defineOptions({ name: 'TButton' });

这样做的好处是你可以更清晰地组织和复用组件的逻辑，而不需要在每个组件里重复写相同的配置。

总的来说，`<script lang="ts" setup>` 结合了TypeScript的强大类型系统和Vue的简洁API，提供了一种更现代、更模块化的组件开发体验。

相关问题

<script lang="ts" setup></script>

这是一个 Vue 3 中使用的 `<script lang="ts" setup>` 语法，它用于编写组件的逻辑部分。 `setup` 选项是 Vue 3 中的新特性，它可以让我们更方便地编写组件的逻辑部分，同时也可以获得更好的性能和类型检查。

使用 `<script lang="ts" setup>` 语法编写的组件逻辑部分会被编译成一个普通的 JavaScript 函数，这个函数接收一些参数，例如 `props`、`attrs`、`slots` 等，然后返回一个对象，这个对象包含了组件的状态、计算属性、方法等等。

需要注意的是，使用 `<script lang="ts" setup>` 语法时，我们不能直接在逻辑部分中定义响应式数据，而是需要使用 Vue 3 提供的 `ref` 或 `reactive` 函数来定义响应式数据。

<script lang='ts' setup>和<script setup>的区别

<script lang='ts' setup>是在单文件组件中使用 TypeScript 的语法来编写组件的新特性，可以使用TypeScript来编写组件的逻辑代码。

而<script setup>是Vue3新增的语法糖，可以简化组件的编写，将模板、组件逻辑和组件属性声明放在一起，让单文件组件更加简化、易读。在Vue3中，使用<script setup>的方式编写组件时，可以省去很多重复的代码，同时还可以自动推导出组件属性的类型，提高了代码的可维护性和可读性。