Vue3 ＜script setup lang=“ts“＞的基本使用

Vue3提供了一种名为 <script setup> 的语法糖，它可以让我们更加便捷地编写Vue组件。在加上 lang="ts" 后可以通过TypeScript来书写Vue3组件，提高代码的可读性和类型安全性。

首先，让我们创建一个Vue3组件，该组件可以在页面上显示一个计数器，并且能够点击按钮对其进行累加操作。

<template>
  <div>
    <h1>Counter: {{ counter }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

在Vue3的新增语法糖 <script setup> 中，我们可以通过以下方式来编写样式代码：

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

const counter = ref(0)

const increment = () => {
  counter.value++
}
</script>

在上面的代码中，我们引入了 Vue 的 ref 函数来定义一个计数器。ref 总是返回一个对象，这个对象包含了一个名为 value 的响应式属性，通过 counter.value 累加来更新计数器的值。在 increment 函数中，我们只需要让 counter 加一就可以了。

除了简化代码之外，<script setup> 还可以提供更严格的类型检查和错误提示，以及更友好的错误提示信息。

接下来，让我们再来看一下一个更复杂的例子。这次我们来创建一个 TodoList 组件，它可以添加和删除任务，并能够显示所有任务列表的待做和已完成情况。

<template>
  <div>
    <h1>Todos:</h1>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span :class="todo.completed ? 'completed' : ''"
          >{{ todo.text }}</span
        >
        <button @click="complete(todo)">Complete</button>
        <button @click="remove(todo)">Delete</button>
      </li>
    </ul>

    <form @submit.prevent="add">
      <input type="text" v-model="text" />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

在 <script setup> 中，我们可以使用以下代码编写逻辑代码：

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

interface Todo {
  text: string
  completed: boolean
}

const todos = ref<Todo[]>([])
const text = ref('')

const add = () => {
  todos.value.push({
    text: text.value,
    completed: false
  })
  text.value = ''
}

const complete = (todo: Todo) => {
  todo.completed = true
}

const remove = (todo: Todo) => {
  const index = todos.value.indexOf(todo)
  todos.value.splice(index, 1)
}
</script>

在上面的代码中，我们使用 TypeScript 来定义了一个 Todo 接口，并使用了 ref 函数来定义了 todos 和 text 响应式数据。在 add 函数中，我们使用 push 方法向 todos 数组中加入一个新的任务，并将 text 清空，实现了增加任务的操作。在 complete 函数中，我们将待做任务标记为已完成，实现了完成任务的操作。在 remove 函数中，我们使用 indexOf 方法来查找待删除任务在数组中的索引，并借助 splice 方法从数组中将其删除，实现了删除任务的操作。