组合式函数无法直接访问 props，必须由组件显式传参；应优先传递 ref 或 reactive 对象以保持响应性，避免深度解构丢失响应性，类型安全需配合 defineprops 类型声明。
组合式函数本身不参与组件生命周期，也没有内置的 props 上下文，所以不能直接访问父组件传来的 props。必须由组件显式把需要的 prop 值作为参数传进去，这是唯一可靠的方式。
必须手动传参，不能隐式获取
defineProps 只能在 <script setup></script> 或 setup() 函数中调用，组合式函数（如 useCounter、useTitleFormatter）里调用会报错。它不是组件，没有 this，也不认识 props 对象。
- ✅ 正确做法：在组件中解构或读取 props，再以参数形式传入组合式函数
- ❌ 错误做法：在组合式函数内部写
defineProps、尝试访问全局props、或依赖getCurrentInstance获取上下文
保持响应性：优先传 ref 或 reactive
如果父组件传的是响应式数据（比如 ref 或 reactive 对象），直接把 ref 传进去，组合式函数内部就能自动追踪变化；若传普通值（如字符串、数字字面量），则需配合 computed 或 watch 手动监听。
- 传
ref：函数内可直接用propRef.value，且修改会同步到父组件（注意：仅限父组件允许修改时） - 传
reactive对象：内部可直接读写属性，响应性保留 - 传普通值：建议用
computed(() => props.xxx)包一层，避免值“冻结”
类型安全与解构注意事项
使用 TypeScript + defineProps 声明时，推荐用对象形式并标注类型，这样传入组合式函数的参数也能获得完整类型推导。
Vue 3 组合式 API 与 <script setup> 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。</p> </div> <a rel="nofollow" href="/xiazai/skill8748" title="vue-composition-api-best-practices" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>避免在组合式函数内对 props 参数做深度解构（如 <code>const { title } = props</code>），否则会丢失响应性</li> <li>应始终通过 <code>props.title</code> 访问，或用 <code>toRefs(props)</code> 转换后再解构</li> <li>若组合式函数需默认值逻辑，应在组件层处理（用 <code>default</code> 配置），而非在函数内硬编码 fallback</li> </ul> <h3>典型调用模式示例</h3> <p>父组件中：</p> <p><font color="#888"><script setup><br> import { ref } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br> import { useFormattedTitle } from './composables/useFormattedTitle'<br> const title = ref('Hello Vue')<br> const formatted = useFormattedTitle(title) // 直接传 ref<br> </script>
组合式函数中：
export function useFormattedTitle(titleRef) {
return computed(() => `【${titleRef.value}】`)
}
这样既清晰又响应，也便于单元测试和复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
相关文章
Pinia 怎么管理视频播放器中清晰度与音量的全局配置
Vue Props 怎么在单元测试中验证属性输入行为
Vue 3 v-model 怎么编写高质量的表单双向绑定组件代码
Vue 3 项目怎么配置首屏加载进度条（NProgress）
Vue 3 中请求取消怎么配合下拉刷新动作取消旧的数据请求
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关专题
Python属于前端也属于后端，其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容，供大家免费下载体验。
2023.08.11
2583
5
实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍：1、WebSocket，它可以在客户端和服务器之间建立持久连接，实现实时的双向通信，前端可以使用 WebSocket API来创建WebSocket连接，并通过发送和接收消息来实现即时通讯；2、Long Polling，是一种模拟实时通信的技术等等。
2023.10.09
5583
6
前端外包工作内容包括：1. 网站和应用程序开发；2. 用户界面和交互设计；3. 用户体验优化；4. 设计和视觉开发；5. 跨浏览器兼容性；6. 性能优化；7. 维护和更新；8. 项目管理和沟通。想了解更多前端的相关内容，可以阅读本专题下面的文章。
2024.05.22
883
5
vue2.0和3.0区别：vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现，vue3中使⽤了es6的proxy API对数据代理，实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容，供大家免费下载体验。
2023.07.17
1694
5
vue3的生命周期：1、beforecreate；2、created；3、beforemount；4、mounted；5、beforeupdate；6、updated；7、beforedestroy；8、destroyed；9、activated；10、deactivated等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
2024.02.23
12182
5
本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧，深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例，指导前端开发者实现高性能、结构清晰的 Vue 应用，提升开发效率与代码可维护性。
2026.02.10
316
23
热门下载
相关下载
精品课程
