Vue 3.2 - 使用Composition API与Script Setup - This Dot Labs

本文写于18个月前，可能包含过时的信息。部分内容可能仍然相关，但建议参考官方文档或最新资源以获取最新信息。

简介

Vue 3 引入了 Composition 组织代码方式不同，Composition API 支持按特性（如用户、API、表单）对代码进行分组，从而为构建 Vue 应用提供了更大的灵活性。

随着 Vue 3.2 的发布，另一个与 Composition API 相关的重要特性 <script setup> 已被正式引入。简单来说，<script setup> 允许开发者定义组件，而无需从 JavaScript 块中导出任何内容，只需定义变量并在模板中直接使用。这种组件编写方式与 Svelte 有些相似，对于初次接触 Vue 的开发者来说，这是一项显著的改进。

使用 <script setup> 的示例

如果您熟悉 Vue 2 的 Options API，单文件组件通常如下所示：

export default {
  data() {
    return {
      name: ''
    };
  },
  computed: {
    isNamePresent() {
      return this.name.length > 0;
    }
  },
  methods: {
    submitForm() {
      console.log('Form submitted');
    }
  }
};

通过 Composition API，我们可以将上述代码重构为以下形式：

import { ref, computed } from 'vue';

export default {
  setup() {
    const name = ref('');
    const isNamePresent = computed(() => name.value.length > 0);    const submitForm = () => {
      console.log('Form submitted');
    };    return {
      name,
      isNamePresent,
      submitForm
    };
  }
};

虽然这种方式提供了更大的灵活性，但仍然需要一个显式的 export default 声明。使用 <script setup>，我们可以进一步简化代码：

import { ref, computed } from 'vue';

const name = ref('');
const isNamePresent = computed(() => name.value.length > 0);

const submitForm = () => {
  console.log('Form submitted');
};

变化解析

1. 在 <script> 标签中添加 setup 属性，启用了新的组件编写模式。
2. 直接在 <script setup> 中定义变量和函数，而无需显式导出。
3. 所有在 <script setup> 中声明的内容都可以直接在模板中使用，包括非响应式变量、常量、实用函数或其他库。

这种方式的主要优势在于，开发者无需手动绑定外部文件（如 Constants.js）到组件值，Vue 会自动处理这些依赖关系。

附加功能

定义组件

使用 <script setup> 时，无需手动定义导入的组件。通过直接导入组件，编译器会自动将其添加到应用中。例如，将表单抽象为单独的组件 Form.vue：

import Form from './Form.vue';


  wzxhzdk:2

组件 Form 会自动在模板中可用，无需额外的 components 配置。

使用 defineProps 和 defineEmits

在 <script setup> 中，可以通过 defineProps 和 defineEmits 宏来定义组件的 props 和事件：

import { computed } from 'vue';

const props = defineProps({
  modelValue: String
});

const emit = defineEmits(['update:modelValue', 'submit']);

const name = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

const submitForm = () => {
  emit('submit');
};

变化解析

1. 使用 defineProps 定义组件的 props，例如 modelValue。
2. 使用 defineEmits 定义组件的事件，例如 submit。
3. 创建计算属性 name，通过自定义 getter 和 setter 实现双向绑定。
4. 在 submitForm 函数中触发 submit 事件。

在父组件中，可以通过以下方式使用子组件：

其他功能

除了上述核心功能，Vue 3.2 的 <script setup> 还支持以下特性：

• 动态组件：组件在模板中立即可用，可用于动态组件的编写，例如 <component :is="Form" />。
• 命名空间组件：通过 import * as Form 语法对组件进行命名空间管理，例如 <Form.Input> 或 <Form.Submit>。
• 顶级等待：在 <script setup> 中可以直接使用 async/await，无需额外包装异步函数。但需要在外部使用 <Suspense> 包裹组件。

混合使用 Options API

如果某些场景下需要使用 Options API，可以在组件中同时添加 <script> 块和 <script setup> 块，Vue 会自动混合两者的代码。这在使用 Nuxt 等框架时尤为有用，因为 Nuxt 为标准 Options API 提供了一些额外功能。

结论

Vue 3.2 的 <script setup> 为开发者提供了一种更简洁、更高效的组件编写方式。通过减少样板代码和简化逻辑，开发者可以更专注于实际功能的实现。同时，Vue 仍然保留了对 Options API 的支持，为不同需求的开发者提供了灵活的选择。

如果您尚未尝试 <script setup>，不妨在下一个项目中体验它的强大功能！

原文链接: https://www.thisdot.co/blog/vue-3-2-using-composition-api-with-script-setup