亦庄建站推广百度关键词快速优化

在 Vue 3 中，除了使用 setup 函数的组合式 API 这种表达方法外，还可以使用选项式 API 和 <script setup> 语法糖，下面分别介绍这几种方式：

1. 选项式 API（Options API）

选项式 API 是 Vue 2 中就有的风格，Vue 3 仍然支持这种方式。它将不同功能的代码（如数据、方法、生命周期钩子等）分组到不同的选项中。

<template><div><p>{{ message }}</p><button @click="increment">增加</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue 3!',count: 0};},methods: {increment() {this.count++;}},mounted() {console.log('组件挂载完成');}
};
</script>

代码解释

• data 选项返回一个对象，包含组件的响应式数据。
• methods 选项包含组件的方法。
• mounted 是一个生命周期钩子，在组件挂载完成后执行。

2. <script setup> 语法糖

<script setup> 是 Vue 3 引入的一种更简洁的语法糖，用于组合式 API 的编写。它可以让你更直接地在 <script> 标签中编写逻辑，而不需要 setup 函数的包裹。

<template><div><p>{{ message }}</p><button @click="increment">增加</button></div>
</template><script setup>
import { ref } from 'vue';const message = ref('Hello, Vue 3!');
const count = ref(0);const increment = () => {count.value++;
};
</script>

代码解释

• 直接在 <script setup> 标签中引入所需的 API（如 ref）。
• 定义响应式数据（如 message 和 count）和方法（如 increment），它们会自动暴露给模板使用。

三种方式对比

• 选项式 API：适合熟悉 Vue 2 的开发者，代码结构清晰，不同功能模块分离，但在处理复杂组件时可能会导致代码分散，难以维护。
• setup 函数：是组合式 API 的标准写法，将相关逻辑封装在一起，提高了代码的复用性和可维护性，但代码结构相对复杂。
• <script setup> 语法糖：简洁直观，减少了样板代码，是官方推荐的写法，尤其适合小型组件和快速开发。

你可以根据项目的需求和个人的编码习惯选择合适的表达方式。