vue3 script setup语法糖

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

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

// 定义一个响应式变量
const message = ref('Hello Vue 3 with Script Setup!');

// 定义一个响应式对象
const state = reactive({
  count: 0
});

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

<style scoped>
/* 你可以在这里添加样式 */
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了两个绑定：{{ message }} 和 {{ count }} 来显示数据。
   • 一个按钮绑定了 @click 事件，点击时会调用 increment 方法。

2. 脚本部分 (<script setup>):

   • ref 和 reactive 是 Vue 3 提供的 API，用于定义响应式数据。
     • message 是一个使用 ref 创建的响应式变量。
     • state 是一个使用 reactive 创建的响应式对象。
   • increment 方法用于增加 state.count 的值。

3. 样式部分 (<style scoped>):

   • 可以添加局部样式，作用范围仅限于当前组件。

这种写法简化了 Vue 组件的编写方式，减少了样板代码，使得代码更加简洁易读。