Vue3 的 Script Setup 入门使用指南

在 Vue3 的众多新特性中，Script Setup 为开发者提供了一种更加简洁和高效的组件编写方式。本文将为您详细介绍 Vue3 的 Script Setup 的入门使用方法。

Script Setup 最大的特点之一就是简化了组件的逻辑代码组织。在传统的 Vue3 组件中，我们需要分别在 <script> 和 <template> 标签中编写 JavaScript 逻辑和模板代码。而在 Script Setup 中，这一切都可以在一个 <script setup> 标签内完成。

创建一个新的 Vue3 项目，并在组件中引入 <script setup> 标签。在这个标签内部，您可以直接定义组件的属性、方法、计算属性等。例如：

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

const count = ref(0);

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

在上述代码中，使用 ref 函数创建了一个响应式的变量 count，并定义了一个 increment 方法来增加 count 的值。

另外，在 Script Setup 中，还可以方便地使用组合式 API 的钩子函数，如 onMounted 、onUpdated 等。例如：

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

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

在模板部分，您可以像往常一样直接使用定义好的属性和方法，无需再通过 return 语句将其暴露出去。

Script Setup 还支持直接导入其他组件，并在模板中使用。例如：

<script setup>
import MyComponent from './MyComponent.vue';
</script>

<template>
  <MyComponent />
</template>

需要注意的是，在使用 Script Setup 时，由于没有 export default 语句，所以组件的名称会根据文件名自动推断。

Vue3 的 Script Setup 为开发者带来了更加简洁和直观的开发体验。通过将组件的逻辑和模板代码紧密结合，减少了代码的冗余，提高了开发效率。希望通过本文的介绍，您能够顺利入门并开始在实际项目中运用 Script Setup 这一强大的特性。