前几天看了同事的代码他在vue3中还在使用setup() 函数，怎么他不用<script setup>，我好奇的问了下他，他说这不都一样嘛，习惯了。
我心里想，这可不是习不习惯的问题，两者的区别还是有些的，今天这篇文章就总结了下vue3中setup() 函数与 <script setup> 的本质区别。
setup() 函数与 <script setup> 的本质区别
setup() 函数
- 定义：setup() 是 Vue 3 组合式 API 的核心函数，用于初始化组件的状态和逻辑。它在组件实例创建之前执行。
- 使用方式：需要在标准的 <script> 标签内定义，并通过 export default 导出。在 setup() 函数中定义的变量和方法需要通过 return 语句暴露给模板。
- 特点：
- 提供了更多的灵活性和控制，适合复杂的组件逻辑。
- 适合需要显式返回数据和方法的场景。
- 需要手动管理 props 和 context。
<script setup>
- 定义：<script setup> 是 Vue 3 中引入的一种新的组件声明方式，是 setup() 函数的语法糖。
- 使用方式：直接在 <script setup> 标签内书写与组件逻辑相关的代码，无需手动导出 setup 函数。
- 特点：
- 代码更加简洁，减少了样板代码。
- 自动将定义的所有顶级变量暴露给模板，无需显式返回。
- 提升了性能，因为编译时进行了优化。
- 提供了更好的 TypeScript 支持。
- 自动处理 props 和 context。
应用场景示例代码
使用 setup() 函数
{{ message }}
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue3!');
const increment = () => {
message.value += '!';
};
return {
message,
increment
};
}
};
</script>
在这个示例中，setup() 函数定义了响应式变量 message 和方法 increment，并通过返回的方式暴露给模板。
使用 <script setup>
{{ message }}
<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue 3!');
const toggleMessage = () => {
message.value = message.value === 'Hello, Vue 3!' ? 'Goodbye, Vue 3!' : 'Hello, Vue 3!';
};
</script>
在这个示例中，使用 <script setup> 语法，直接定义了变量 message 和方法 toggleMessage，无需显式返回，模板可以直接访问。
推荐使用 <script setup>
- 理由：
- 简洁性：<script setup> 语法更加简洁，减少了样板代码，使得组件的结构更加清晰。
- 性能优化：编译时进行了优化，提升了组件的性能。
- 更好的 TypeScript 支持：提供了更好的类型推导和类型检查，使得在使用 TypeScript 时体验更佳。
- **自动处理 props 和 context**：无需手动处理，简化了代码。
在大多数情况下，推荐使用 <script setup> 语法，特别是在构建简单到中等复杂度的组件时。对于非常复杂的组件逻辑，或者需要高度定制化的场景，setup() 函数仍然提供了足够的灵活性和控制能力。
创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦
小伙伴们在工作中还遇到过其他应用场景吗，欢迎评论区留言讨论哦。