Vue3，setup()函数与＜script setup＞到底有什么本质区别？
文章目录
博主介绍：全网粉丝10w+、CSDN合伙人、华为云特邀云享专家，阿里云专家博主、星级博主，51cto明日之星，热爱技术和分享、专注于Java技术领域
🍅文末获取源码联系🍅
👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟
Vue3 中 setup() 函数与 <script setup> 的本质区别
在 Vue3 中，setup() 函数和 <script setup> 这两种方式都被广泛用于组合式 API（Composition API）的开发。它们的引入为开发者带来了更多的灵活性与简洁性。然而，很多开发者在学习 Vue3 时，往往会对这两者的使用产生一些困惑。本文将深入剖析 setup() 函数与 <script setup> 的本质区别，帮助大家更好地理解并应用这两者。
一、setup() 函数的基础理解
setup() 是 Vue3 组合式 API 的核心。它是一个普通的函数，被用来初始化组件的状态，包括响应式数据、计算属性、生命周期钩子等。它在组件实例被创建之前执行，因此在 setup() 中访问 this 是不可能的，因为此时还没有创建组件实例。
<script>
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return { count, increment };
},
};
</script>
如上所示，setup() 函数中定义了响应式变量 count 和方法 increment，并通过返回的方式暴露给模板。可以看到，setup() 仍然位于标准的 <script> 标签内。
二、<script setup> 的基础理解
Vue3 引入 <script setup> 是为了简化代码书写和减少样板代码。<script setup> 本质上是 setup() 函数的语法糖，它直接将 setup() 函数内的逻辑拉平至 <script> 中，不需要显式地返回数据或方法。它的出现让代码更加简洁，同时还具备性能优化的优势。
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>
如上所示，在 <script setup> 中，我们不需要显式地声明 setup() 函数，代码更加扁平化，并且省去了 return 的步骤。模板直接可以访问到所有定义的变量和方法。
三、setup() 与 <script setup> 的本质区别
-
语法简洁性
setup()是标准的函数调用，要求我们手动返回需要暴露给模板的数据和方法。<script setup>是语法糖，自动将定义的所有顶级变量暴露给模板，无需手动返回，代码更加简洁。
-
性能优化
<script setup>在编译时进行优化，避免了运行时的开销。它在 Vue 编译阶段就能确定哪些变量需要暴露给模板，因此它比setup()更高效。
-
顶层作用域
- 在
setup()函数中，所有变量和方法都需要在函数内定义，且需要通过return暴露给模板。 - 而
<script setup>则是顶层作用域的写法，变量直接定义在<script>标签内部，并且会自动暴露给模板，无需显式返回。
- 在
-
书写习惯
- 对于需要显式生命周期钩子或使用复杂逻辑的场景，
setup()依旧是一种常见的选择。 - 而对于简单组件或倾向于使用简洁代码的场景，
<script setup>更受青睐。
- 对于需要显式生命周期钩子或使用复杂逻辑的场景，
-
模块引用
- 在
setup()中，模块的导入和变量声明都与传统的<script>标签类似。 <script setup>则可以将导入的模块、声明的变量、定义的函数都直接暴露给模板，无需手动管理暴露。
- 在
四、何时使用 setup()，何时使用 <script setup>
-
推荐使用
<script setup>的场景- 组件逻辑较为简单，且不需要复杂的生命周期控制。
- 希望减少样板代码，使代码更加直观和简洁。
- 需要性能优化，尤其是组件数量较多时。
-
推荐使用
setup()的场景- 需要显式的生命周期钩子控制。
- 需要复杂的逻辑处理，或者希望有更好的逻辑分隔。
- 有可能需要访问组件实例（尽管通常通过
getCurrentInstance实现）。
五、<script setup> 的一些特殊功能
-
Props 和 Emits 声明
在<script setup>中，声明props和emits可以通过直接使用解构的方式：<script setup> const props = defineProps(['title']); const emit = defineEmits(['update']); </script>而在
setup()中，必须通过函数参数传递props和context。 -
CSS 变量支持
<script setup>支持直接使用<style scoped>来自动应用 CSS 变量，无需额外配置。
六、总结
setup() 函数与 <script setup> 各有其优势和适用场景。setup() 提供了更多的灵活性和控制，而 <script setup> 则追求简洁与性能优化。随着 Vue3 生态的逐渐成熟，越来越多的开发者倾向于使用 <script setup>，特别是在构建简单组件时，它不仅减少了样板代码，还提升了开发效率。
了解了两者的区别之后，开发者可以根据项目需求和个人习惯，在不同场景下灵活选择，充分发挥 Vue3 组合式 API 的优势。
大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻
原文地址：https://blog.csdn.net/qq_43546721/article/details/142861447
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！