Vue 3 组合式 API 与 <script setup> 最佳实践,涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
Vue 3 QQ API $ $ <script setup > , TypeScript QQ Vue 3.3+, QQ: 定义选项. 3.3 QQ scri是一项面向实际任务的技能。它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;
涉及批量任务时,还应保存进度,避免中断后重复操作。该技能适合用于一次性任务,也可以接入自动化工作流,与其他技能或上层代理配合完成更完整的业务链路;在组合使用时,应明确每一步的输入输出关系,并避免不同步骤之间出现参数冲突。
Vue 3 组合式 API 与 、TypeScript 集成及代码组织模式的最佳实践。
本技能面向 Vue 3.3+,部分功能需要更高的次版本号:
| 特性 | 最低版本 | 参考 |
|---|---|---|
defineOptions |
3.3+ | script-setup |
toValue() |
3.3+ | script-setup |
defineModel |
3.4+ | script-setup |
watch 搭配 once 选项 |
3.4+ | reactivity |
useTemplateRef() |
3.5+ | script-setup |
useId() |
3.5+ | script-setup |
onWatcherCleanup() |
3.5+ | reactivity |
| 问题 | 参考阅读 |
|---|---|
我的 很乱,难以浏览 |
SFC 代码组织 |
| 某个功能的逻辑分散在很多行中 | useXxx 函数模式 |
| 相同逻辑在多个组件中重复 | 功能提取 |
| 两个功能相互影响,但不知道正确的处理模式 | 跨功能依赖 |
Props/emits 类型安全、defineModel 使用 |
script setup 最佳实践 |
| 在 hooks/工具函数/插件中无法访问 Store | 组件外 Store 访问 |
| 如何组织新的组合式函数文件 | 组合式函数设计模式 |
| 页面感觉慢,可能是响应性问题 | 响应性与性能 |
| 如何测试组合式函数 | 组合式函数测试 |
类型安全的 provide/inject |
script setup - Provide/Inject |
1. defineOptions → 组件名称
2. defineProps → Props 类型声明
3. defineModel → 双向绑定(3.4+)
4. inject → 注入依赖
5. defineEmits → 事件类型声明
6. Store 声明 → useXxxStore()
7. 外部 hooks → useI18n()、useDesign() 等
8. 功能声明 → const { ... } = useFeature()
9. provide → 提供依赖
10. defineExpose → 暴露公共 API
11. 功能实现 → function useFeature() {}
基本类型 → ref 需要深层响应 → ref 大型对象/动态组件 → shallowRef 不需要重新赋值 → reactive(谨慎使用) 永不响应式 → markRaw + shallowRef
组件内 (
热门下载
相关下载
精品课程