vue3 setup

<script setup>
// 这是 Vue 3 中的 <script setup> 语法，它是一个更简洁的方式来编写组合式 API 组件。

import { ref, reactive, onMounted } from 'vue';

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

// 定义一个响应式的对象
const state = reactive({
  name: 'Vue 3',
  version: '3.0'
});

// 在组件挂载时执行的钩子函数
onMounted(() => {
  console.log('Component is mounted!');
});

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

</script>

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

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

解释说明：

• <script setup> 是 Vue 3 引入的一种新的脚本标签语法，用于简化组合式 API 的使用。
• ref 和 reactive 用于创建响应式数据。ref 用于基本类型，reactive 用于对象。
• onMounted 是生命周期钩子，当组件挂载完成时会触发。
• increment 是一个自定义方法，用于修改 count 的值。
• <template> 标签中包含了 HTML 模板代码，用于渲染页面内容。
• <style scoped> 标签中可以添加组件私有的样式。