<script setup>语法糖的好处

Vue 3 <script setup> 语法糖的优势
更简洁的代码结构
<script setup> 提供了一种更加直观的方式编写组件逻辑，简化了代码结构。通过这种方式，开发者可以直接在脚本标签内声明响应式变量、计算属性以及生命周期钩子等，而不需要显式的 export default {} 或者 setup() 函数[^1]。
自动暴露给模板
所有顶层绑定会自动被暴露到模板中去，这意味着不再需要手动返回对象来让这些值可以在 HTML 模板里访问到了。这不仅减少了样板代码的数量，还提高了开发效率[^3]。
<!-- 不再需要这样 -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>

<!-- 可以改为 -->
<script setup>
import { ref } from 'vue'

const count = ref(0) // 直接可用,无需return
</script>
登录后复制
改善 TypeScript 集成体验
对于使用TypeScript构建的应用程序来说，<script setup> 能够更好地支持类型推断和静态分析工具的工作。由于所有的导入都处于同一个作用域之下，并且可以立即使用，因此IDE能够提供更好的提示和支持[^2]。
方便地处理 props 和 emits
当涉及到父子组件之间的通讯时，defineProps 和 defineEmits 宏使得接收 prop 参数或触发事件变得更加容易理解和操作。它们提供了清晰明了的方式来定义预期输入的数据形式及其变化通知机制。
// 子组件
<script setup>
import { defineProps, defineEmit } from "vue";

const props = defineProps({
message: String,
});

const emit = defineEmit(['reply']);
function replyToParent(msg){
emit('reply', msg);
}
</script>
登录后复制