以下是关于<script setup>语法在Vue 3中的功能特色和简洁API使用的详细总结，附带案例参考和解释。

简介

<script setup> 是Vue 3.2引入的一种语法糖，它极大地简化了组件的书写方式，让代码更加简洁和易于维护。以下是<script setup>为Vue 3带来的主要功能特色和简洁API使用，帮助开发者更高效地构建Vue组件。

1. 直接导入组合API

在<script setup>中，可以直接导入并使用Vue的组合API，如ref、reactive、computed、watch等。这些API可以直接在模板中使用，而无需显式导出。

示例：

<script setup lang="ts">
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

const increment = () => {
  count.value++;
};
</script>

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

2. 自动导出到模板

在<script setup>中声明的变量和函数会自动暴露给模板使用，无需显式返回或导出。

示例：

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

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

3. 使用defineProps和defineEmits

<script setup>中提供了defineProps和defineEmits用于处理组件的props和事件。这些API简化了组件属性和事件的定义和使用。

示例：

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="emitEvent">Emit Event</button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{ msg: string }>();
const emit = defineEmits<{ (e: 'my-event', value: number): void }>();

const emitEvent = () => {
  emit('my-event', 42);
};
</script>

4. 生命周期钩子的直接使用

<script setup>语法中可以直接使用Vue组件的生命周期钩子，如onMounted、onUpdated、onUnmounted等。

示例：

<script setup lang="ts">
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

onMounted(() => {
  console.log('Component is mounted');
});

onUpdated(() => {
  console.log('Component is updated');
});

onUnmounted(() => {
  console.log('Component is unmounted');
});
</script>

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

5. 组合API钩子的直接使用

除了生命周期钩子，组合API中的provide和inject也可以直接在<script setup>中使用。

示例：

ProviderComponent.vue

<template>
  <slot />
</template>

<script setup lang="ts">
import { provide, ref } from 'vue';

const someValue = ref('Provided Value');
provide('myKey', someValue);
</script>

ConsumerComponent.vue

<template>
  <div>{{ injectedValue }}</div>
</template>

<script setup lang="ts">
import { inject } from 'vue';

const injectedValue = inject('myKey');
</script>

6. 使用模板引用（template refs）

可以使用ref绑定到DOM元素或组件实例，直接在<script setup>中操作DOM。

示例：

<template>
  <div>
    <input ref="inputRef" type="text" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const inputRef = ref<HTMLInputElement | null>(null);

const focusInput = () => {
  inputRef.value?.focus();
};

onMounted(() => {
  inputRef.value?.focus();
});
</script>

7. 使用异步setup

<script setup>支持异步函数，可以在setup中直接使用await，方便处理异步数据加载。

示例：

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const data = ref(null);

onMounted(async () => {
  const response = await fetch('https://api.example.com/data');
  data.value = await response.json();
});
</script>

<template>
  <div>{{ data }}</div>
</template>

8. 更简洁的样式管理

可以使用<style scoped>或<style module>来确保样式仅作用于当前组件，并且可以直接在SFC中定义样式。

示例：

<template>
  <div>
    <button>Styled Button</button>
  </div>
</template>

<script setup>
</script>

<style scoped>
button {
  color: blue;
}
</style>

9. 插槽处理的简化

使用<script setup>时，处理插槽（slots）和作用域插槽（scoped slots）更加简洁。

示例：

<template>
  <div>
    <slot name="default" />
  </div>
</template>

<script setup>
</script>

总结

<script setup>语法为Vue 3引入了许多简洁且强大的功能，使得组件的书写和管理变得更加高效。通过直接导入和使用组合API、自动导出到模板、简化props和事件处理、方便的模板引用以及支持异步操作等特性，开发者可以更轻松地构建和维护Vue组件。