如何使用 `＜script setup＞` 语法糖来优化 Vue 3 组件的代码结构？

<script setup> 是 Vue 3 中引入的一种新的组件语法糖，它使得使用 Composition API 编写组件更加简洁和直观。这种语法糖自动处理了 setup() 函数的大部分繁琐部分，让你能够更专注于组件的逻辑和状态。以下是如何使用 <script setup> 语法糖来优化 Vue 3 组件代码结构的一些方法：

1. 直接定义响应式状态

在 <script setup> 中，你可以直接使用 ref、reactive 和 computed 等 API 定义响应式状态，而不需要显式返回它们。

示例代码：

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

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

2. 使用生命周期钩子

<script setup> 允许你直接导入并使用生命周期钩子，如 onMounted、onUpdated 等，而不需要在 setup() 函数中显式调用它们。

示例代码：

<template>
  <div>Component has been mounted.</div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted.');
});
</script>

3. 导入和使用 Composition API 函数

你可以在 <script setup> 中直接导入和使用 Composition API 提供的函数，如 watch、watchEffect 等。

示例代码：

<template>
  <div>{{ fullName }}</div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

watchEffect(() => {
  console.log(`Name changed to: ${fullName.value}`);
});
</script>

4. 模板引用

在 <script setup> 中，你可以使用 ref 来创建模板引用，这些引用可以直接在模板中使用。

示例代码：

<template>
  <input :value="inputValue" @input="inputValue = $event.target.value" />
  <div>Input value: {{ inputValue }}</div>
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref('');
</script>

5. 组合多个组件逻辑

<script setup> 允许你将多个组件逻辑组合在一起，而不需要显式地使用 export default。

示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
// 导入多个逻辑文件
import { useMessages } from './useMessages';
import { useUser } from './useUser';

// 使用组合函数
useMessages();
useUser();
</script>

6. 使用 TypeScript

<script setup> 与 TypeScript 配合得非常好，提供了更好的类型推断和类型检查。

示例代码：

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

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

const count = ref<number>(0);

function increment() {
  count.value++;
}
</script>

总结

<script setup> 语法糖提供了一种更简洁、更直观的方式来编写 Vue 3 组件。它简化了 Composition API 的使用，使得组件的逻辑更加清晰，代码更加易于维护。通过上述示例，你可以看到如何利用 <script setup> 来优化你的 Vue 3 组件代码结构。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情