vue3的setup语法糖

// Vue 3 setup 语法糖示例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

<script setup>
// 这里的 <script setup> 是 Vue 3 的新语法糖，可以在模板中直接使用定义的变量和函数，无需再通过 return 暴露它们。

import { ref } from 'vue';

// 定义一个响应式变量
const message = ref('Hello Vue 3 setup syntax sugar!');

// 定义另一个响应式变量
const count = ref(0);

// 定义一个方法
const increment = () => {
  count.value++;
};
</script>

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

解释说明：

1. <script setup>：这是 Vue 3 引入的新语法糖，允许我们在单文件组件 (SFC) 中直接编写组合式 API 代码。与传统的 <script> 标签不同，<script setup> 中的所有顶层绑定（变量、函数等）会自动暴露给模板使用，无需显式地通过 return 返回。

2. ref：用于创建一个响应式的引用对象。在上面的例子中，message 和 count 都是通过 ref 创建的响应式变量。它们可以在模板中直接使用，并且当其值发生变化时，视图会自动更新。

3. increment 方法：这是一个普通的方法，用来增加 count 的值。由于 count 是一个 ref，我们需要通过 count.value 来访问或修改它的值。

4. 模板中的使用：在模板中，可以直接使用 {{ message }} 和 {{ count }} 来显示这些响应式变量的值。同时，按钮点击事件绑定了 increment 方法，点击后会调用该方法并更新 count 的值。