＜script setup＞ 讲解

<script setup> 是 Vue 3 中引入的一项重要语法特性，它简化了组件的开发流程，提升了代码可读性和开发效率。

核心优势：

• 更简洁的代码: 无需显式导出组件选项，直接使用变量和函数即可。
• 更直观的逻辑: 组件逻辑和模板代码更紧密地结合在一起，更容易理解和维护。
• 更强大的类型推断: TypeScript 支持更加强大，可以自动推断类型，减少代码冗余。
• 更好的性能: 编译器可以优化代码，提高组件的运行效率

基本语法：

 

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

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

const count = ref(0);
const title = 'My Counter';

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

代码解析：

1. <script setup> 标签： 取代了传统的 <script> 标签，用于定义组件的逻辑。
2. 直接使用变量和函数： 无需使用 export default 导出组件选项，可以直接使用变量 count 和函数 increment。
3. ref 函数： 来自 vue 库，用于创建响应式数据，类似于 data 选项。
4. 模板中的数据绑定： 直接使用变量名 count 和 title 在模板中进行数据绑定。
5. 事件监听： 使用 @click 指令绑定 increment 函数到按钮点击事件。

更深入的理解：

• Composition API： <script setup> 是 Composition API 的语法糖，它将 Composition API 的功能集成到更简洁的语法中。
• 自动导出： 编译器会自动将 <script setup> 中定义的变量和函数导出为组件选项，无需手动导出。
• 类型推断： 使用 TypeScript 时，编译器可以自动推断变量和函数的类型，减少代码冗余。
• 代码优化： 编译器可以优化 <script setup> 中的代码，提高组件的运行效率。

示例：

• 使用 ref 创建响应式数据：

 

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

const message = ref('Hello World!');
</script>

• 使用 computed 计算属性：

 

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

const count = ref(0);

const doubledCount = computed(() => count.value * 2);
</script>

• 使用 watch 监听数据变化：

 

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

const count = ref(0);

watch(count, (newCount) => {
  console.log('Count changed to:', newCount);
});
</script>