当你准备从 Vue 2 的 Options API 迁移到 Vue 3 的 Composition API 时， <script setup> 是一个非常重要的新特性。它简化了组件的编写方式，让 props、响应式数据、计算属性和方法等更加简洁地管理。
<script setup> 是什么？
<script setup> 是 Vue 3 中引入的新特性，用于编写使用 Composition API 的单文件组件（SFC）。它提供了语法糖，可以更轻松地处理组件中的 props、响应式数据、计算属性和方法，相比 Options API 更加灵活和清晰。
如何将 data 函数转换为 Vue 3 Composition API？
在 Vue 2.x 中使用 Options API，我们可能会这样定义 data 函数：
<script>
export default {
data() {
return {
messageToUser: "介个素vue2哦 👋🏻",
buttonClicks: 0,
};
},
};
</script>
而在 Vue 3 中的 Composition API，可以这样写：
<script setup>
import { ref } from "vue";
const messageToUser = ref("介个素vue3哦 👋🏻");
const buttonClicks = ref(0);
console.log(buttonClicks.value); // 在控制台打印 0
</script>
使用 ref() 来声明响应式变量，使用 .value 来访问或修改变量的值。
如何在 Vue 3 Composition API 中使用 props？
在 Vue 2.x 中，我们会这样定义 props：
<script>
export default {
props: ["msg", "start"],
};
</script>
而在 Vue 3 中的 Composition API，可以使用 defineProps()：
<script setup>
import { defineProps } from "vue";
const props = defineProps({
msg: String,
start: Number,
});
</script>
defineProps() 允许定义和验证 props，与 Vue 2.x 中的方式类似，但是在 setup 函数内部进行。
Vue 3 Composition API 中方法的处理方式是什么？
在 Vue 2.x 中，我们会这样定义方法：
<script>
export default {
methods: {
doubleCount() {
this.count = this.count * 2;
},
},
};
</script>
而在 Vue 3 的 Composition API 中，方法可以直接在 <script setup> 中定义：
<script setup>
import { ref } from "vue";
const count = ref(0);
const doubleCount = () => {
count.value *= 2;
};
</script>
方法被声明为普通的函数，使用 ref() 来声明响应式变量。
Vue 3 Composition API 中如何使用计算属性？
在 Vue 2.x 中，我们会这样定义计算属性：
<script>
export default {
data() {
return {
count: 0,
};
},
computed: {
futureValue() {
return this.count * 2;
},
},
methods: {
doubleCount() {
this.count *= 2;
},
},
};
</script>
而在 Vue 3 的 Composition API 中，可以这样使用 computed()：
<script setup>
import { ref, computed } from "vue";
const count = ref(0);
const doubleCount = () => {
count.value *= 2;
};
const futureValue = computed(() => count.value * 2);
</script>
使用 computed() 来创建一个基于响应式变量的计算属性。
总结
Vue 3 的 Composition API 和 <script setup> 提供了比 Options API 更加灵活和结构化的组件编写方式。它推动了组件逻辑的重组和复用，使代码更加清晰和易于维护。在迁移过程中，理解这些新模式并调整组件结构，将会充分利用 Composition API 的能力。
