详细讲述 Vue3 的 ＜script setup＞

<script setup> 是 Vue 3 引入的一种新的 <script> 标记的用法，其本质是一个语法糖。它极大简化了单文件组件（SFC）的开发体验，目的是让代码更简洁、易读，同时减少模板和逻辑之间的重复。

1. 基本用法

<!-- 使用 <script setup> -->
<template>
  <div>
    <p>message: {{ message }}</p>
    <button @click="handleClick" style="margin-top: 10px; padding: 2px 6px;">点击我</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 定义响应式变量
const message = ref('Hello, Setup!');
// 定义一个方法
const handleClick = () => {
  message.value = '点击按钮!';
};
</script>

<!-- 使用之前的方式 -->
<template>
  <div>
    <p>message: {{ message }}</p>
    <button @click="handleClick" style="margin-top: 10px; padding: 2px 6px">点击我</button>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const message = ref('Hello, Setup!')
    const handleClick = () => {
      message.value = '点击按钮!'
    }
    return {
      message,
      handleClick
    }
  }
}
</script>

从这个简单的例子可以看出， <script setup> 让代码更加简洁易懂。

2. 特点

1、自动绑定上下文，简化导入和使用

在 <script setup> 中，所有的变量、函数、引入的库都自动绑定到模版的上下文中，无需显式返回，可以直接在模版中使用。

2、优化编译性能

<script setup> 在编译阶段进行了大量的优化，减少运行时开销。

3、更好的类型推断

当使用 TypeScript 时， <script setup> 让类型推断更加精确，开发体验更好。

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
const increment = (): void => {
  count.value++
}
</script>

在 <script setup> 中加上 lang = 'ts'，即表明这个文件是用 TypeScript 编写的，这样可以启用 TS 的类型检查和推断功能。 

3. 对比传统 <script> 

1、组件注册不需要手动处理，默认注册完成。

2、不需要使用 export default。

3、不需要使用 return 显式返回，<script setup> 最外层定义的对象、函数均自动返回，模版直接使用。

4、在 <script setup> 中，父组件拿不到子组件的实例成员，不能直接进行使用，这也是 vue 官方推荐的方法。可以使用 defineExpose 进行暴露，和原始样式的 expose 是一样。

<!-- 子组件 -->
<template>
  <div style="border: 1px solid pink;">
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const incrementCount = () => {
  count.value++
}
defineExpose({
  count,
  incrementCount
})
</script>

<!-- 父组件 -->
<template>
  <div class="container">
    <h2>父组件</h2>
    <MyComponent ref="MyComponentRef" />
    <button @click="childCount" class="btn">打印子组件的计数</button>
    <button @click="incrementChildCount" class="btn">增加子组件的计数</button>
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue'
import { ref } from 'vue'

const MyComponentRef = ref(null)
const childCount = () => {
  console.log('访问子组件的 count: ', MyComponentRef.value.count)
}
const incrementChildCount = () => {
  MyComponentRef.value.incrementCount()
}
</script>

5、在 <script setup> 使用 defineProps 和 defineEmits。

举个