Vue 3.x Script Setup + TypeScript 实践指南

在 Vue.js 3.x 中，`script setup` 语法和 TypeScript 的结合为开发人员带来了强大的工具组合，可以显著提升代码可读性、可维护性和可扩展性。本文将深入探讨 `script setup` + TypeScript 的实际应用，提供详细的指南和示例，帮助您充分利用这项强有力的技术。

拥抱 Composition API

script setup 语法引入了 Composition API，它提供了一种模块化和声明性的方式来组织和管理组件逻辑。通过使用 setup 函数，您可以将组件逻辑分解为更小的、可重用的块，称为 "composition functions"。

<script setup>
const count = ref(0);
const increment = () => { count.value++ };
</script>

TypeScript 类型化

TypeScript 为 Vue 3.x 开发增加了强类型检查，确保代码的健壮性和可靠性。使用 TypeScript 类型可以显式定义变量、属性和函数的类型，从而避免潜在的运行时错误。

<script setup lang="ts">
type Counter = {
  count: Ref<number>;
  increment: () => void;
};

const { count, increment }: Counter = setup();
</script>

利用 Ref 和 Computed

Ref 和 Computed 是 Composition API 中关键的响应式原语，允许您创建可变状态和基于依赖项的计算属性。使用 Ref 可以轻松追踪和更新状态，而 Computed 则提供了一种高效的方法来派生新数据，避免不必要的重新计算。

<script setup>
const inputValue = ref('');
const outputValue = computed(() => inputValue.value.toUpperCase());
</script>

观察生命周期钩子

script setup 允许您使用 onxxx 函数直接在 setup 函数中观察生命周期钩子。这提供了更简洁的方式来处理组件的生命周期事件，同时保留了对钩子的全部访问权限。

<script setup>
onMounted(() => {
  console.log('组件已挂载');
});
</script>

错误处理

在 script setup 中进行错误处理时，可以使用 onError 函数。它允许您捕捉和处理组件中的未处理异常，提供更友好的用户体验和更强大的错误报告。

<script setup>
onError(error => {
  console.error(error);
  // 发送错误报告到服务器...
});
</script>

实际示例：响应式计数器

以下是一个使用 script setup + TypeScript 实现的响应式计数器组件的完整示例：

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

type Counter = {
  count: Ref<number>;
  increment: () => void;
};

const { count, increment }: Counter = setup(() => {
  const count = ref(0);

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

  return {
    count,
    increment,
  };
});
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

结论

script setup 语法与 TypeScript 的结合为 Vue 3.x 开发提供了强大的工具组合。通过利用 Composition API、类型化、响应式原语和生命周期钩子，开发人员可以创建更可读、更可维护和更可扩展的代码。通过实践本文中概述的指南和最佳实践，您可以充分利用这些技术，提升您的 Vue 3.x 应用程序开发体验。