# Vue 3 的 <script setup> 语法
<script setup>
import { computed } from 'vue';
import {PORTAL_NAVS_DATA} from "@/constants/index.js";
// 计算属性：对导航数据进行排序
const sortedNavs = computed(() => {
return [...PORTAL_NAVS_DATA].sort((a, b) => a.orderNum - b.orderNum);
});
</script>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 优点 ✅
- 代码简洁性
- 不需要
setup()函数包裹 - 自动暴露顶层变量到模板
- 减少样板代码
- 更好的 TypeScript 支持
- 天然支持类型推导
- 更好的 IDE 智能提示
- 性能优化
- 编译时优化，运行时开销更小
- 更好的 tree-shaking
- 逻辑组织更灵活
// 传统写法 vs script setup
// 传统
export default {
setup() {
const count = ref(0)
return { count }
}
}
// script setup - 更简洁
const count = ref(0)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 缺点 ❌
- 学习曲线
- 对 Vue 2 开发者需要重新学习
- 新的概念和模式需要适应
- 调试复杂性
- 编译后的代码可读性较差
- 某些调试工具支持不够完善
- 某些场景限制
// 需要定义组件名时需要额外配置
defineOptions({
name: 'MyComponent'
})
// 需要自定义渲染函数时不够直观
1
2
3
4
5
6
2
3
4
5
6
- 迁移成本
- 旧项目迁移需要重写大量代码
- 团队需要统一规范和培训
# 最佳实践
<script setup>
// 1. 导入
import { ref, computed, onMounted } from 'vue'
// 2. 响应式数据
const count = ref(0)
// 3. 计算属性
const doubleCount = computed(() => count.value * 2)
// 4. 方法
const increment = () => count.value++
// 5. 生命周期
onMounted(() => {
console.log('组件挂载')
})
// 6. 暴露给模板的变量自动可用
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 总结
<script setup> 是现代 Vue 开发的推荐写法，特别适合新项目和追求开发效率的场景。但对于维护老项目或团队技术栈升级需要谨慎考虑迁移成本。