vue3 setup有什么用

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

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

// 使用ref定义响应式变量
const message = ref('Hello Vue 3 Setup!');
const count = ref(0);

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

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

// 这里可以进行其他逻辑处理，例如生命周期钩子、依赖注入等
</script>

<style scoped>
/* 样式代码 */
</style>

解释说明

1. <script setup>:

   • setup 是 Vue 3 中引入的一个新的语法糖，用于更简洁地编写组合式 API。
   • 在 <script setup> 中可以直接使用 ref 和 reactive 等 Composition API，而不需要像在普通的 <script> 标签中那样通过 export default 导出。

2. ref 和 reactive:

   • ref 用于创建一个响应式的原始值（如字符串、数字等），并通过 .value 访问或修改其值。
   • reactive 用于创建一个响应式的对象，直接访问和修改其属性即可。

3. 方法定义:

   • 在 <script setup> 中定义的方法可以直接在模板中使用，无需显式返回。

4. 生命周期钩子:

   • 可以直接在 <script setup> 中使用生命周期钩子，如 onMounted, onUnmounted 等。

5. 样式作用域:

   • <style scoped> 表示这些样式只应用于当前组件。