vue3setup语法糖

<script setup>
// 这是 Vue 3 的 <script setup> 语法糖，它简化了组件的编写方式。

// 定义响应式数据
import { ref, reactive } from 'vue';

// 响应式变量
const count = ref(0);

// 响应式对象
const state = reactive({
  name: 'Vue 3 Setup',
  version: '3.0'
});

// 方法定义
function increment() {
  count.value++;
}

// 导出需要暴露的属性和方法
// 在 <script setup> 中，所有顶层绑定都会自动暴露给模板，无需显式导出

</script>

<template>
  <div>
    <h1>{{ state.name }} - v{{ state.version }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<style scoped>
/* 样式部分 */
</style>

解释说明：

• <script setup> 是 Vue 3 引入的新语法糖，用于简化组件的编写。它允许你在单文件组件 (SFC) 中直接使用组合式 API，而无需显式的 export default。
• ref 和 reactive 用于创建响应式数据。ref 适用于基本类型，而 reactive 适用于对象或数组。
• increment 方法用于更新 count 的值。
• 所有在 <script setup> 中定义的顶层变量和函数会自动暴露给模板，因此不需要像传统写法那样通过 return 来暴露它们。