【Vue】＜script setup＞和 ＜script＞区别是什么？在使用时的写法区别？
<script setup> 是 Vue 3 引入的一种新的脚本语法，它提供了一种更简洁和声明式的方式来编写组件逻辑。它是为了解决传统 <script> 标签在 Vue 单文件组件（SFC）中的一些局限性而设计的。
<script setup> 与 <script> 标签的主要区别：
<script setup> 的特点：
-
组合式 API：
<script setup>强制使用组合式 API，这是 Vue 3 推荐的方式来组织组件逻辑。 -
更少的样板代码：不需要
export default来暴露组件选项。 -
自动引入：在
<script setup>中定义的变量、函数等会自动在模板中可用，无需使用ref或reactive显式声明响应式状态。 -
更好的类型推断：TypeScript 支持更直接，不需要额外的类型声明。
-
更清晰的逻辑复用：通过组合式 API，逻辑可以更容易地在组件之间复用。
<script> 的特点：
-
选项式 API：使用
<script>标签时，你可以选择使用选项式 API 或组合式 API。 -
需要
export default：在<script>中，你需要使用export default来定义组件选项。 -
显式响应式声明：使用
ref、reactive、computed等函数显式声明响应式状态。 -
模板绑定：在模板中使用响应式状态时，需要通过
{{ }}插值或v-bind来绑定。
使用时的写法区别：
使用 <script setup>：
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>
使用 <script>：
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return { count, increment };
},
};
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>
在 <script setup> 中，count 和 increment 函数直接在模板中可用，而在 <script> 中，它们需要通过 return 语句从 setup 函数中返回，以便在模板中使用。
总的来说，<script setup> 提供了一种更现代、更简洁的方式来编写 Vue 组件，它鼓励使用组合式 API，并且减少了样板代码。随着 Vue 3 的普及，<script setup> 可能会成为编写 Vue 组件的主流方式。