详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖

当我们使用Vue3时，可以使用<script lang="ts" setup>语法糖来更方便地编写组件。下面我会详细讲解如何在Vue3中使用该语法糖。

准备工作

首先，我们需要安装Vue3以及TypeScript。可以使用以下命令来安装：

npm install vue@next typescript

同时，我们需要在项目中添加以下编译器选项（tsconfig.json文件）：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "strict": true,
    "isolatedModules": true,
    "esModuleInterop": true
  }
}

如何使用

基本用法

现在，我们可以使用<script lang="ts" setup>语法糖来更方便地编写组件，例如：

<template>
  <h1>{{ title }}</h1>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps({
  title: String
})
</script>

在上面的示例中，我们使用defineProps来定义组件的props，并使用title来渲染组件。

需要注意的是，<script lang="ts" setup>中的代码被编译为一段自动运行的JavaScript代码，并且组件的props和响应式数据都是自动注入的。因此，我们无需手动配置组件，而是通过对导入的API的使用来定义组件的属性和数据。

Vue3组合式API的使用

在Vue3中，我们可以使用Vue3组合式API来更方便地编写可复用的逻辑。因此，我们可以在<script lang="ts" setup>中使用Vue3组合式API来编写组件逻辑。

例如，我们可以定义一个useTitle函数来获取页面标题：

import { computed } from 'vue'

export default function useTitle(title: string) {
  const pageTitle = computed(() => `${title} | My Website`)
  document.title = pageTitle.value
}

然后，我们可以在组件中使用useTitle函数来设置页面标题：

<template>
  <h1>{{ title }}</h1>
</template>

<script lang="ts" setup>
import useTitle from './useTitle'
import { defineProps } from 'vue'

const props = defineProps({
  title: String
})

useTitle(props.title)
</script>

在上面的示例中，我们使用useTitle函数来设置组件的页面标题。

总结

在Vue3中，我们可以使用<script lang="ts" setup>语法糖来更方便地编写组件。无需手动配置组件，通过对导入的API的使用来定义组件的属性和数据。同时，我们还可以使用Vue3组合式API来更方便地编写可复用的逻辑。