实测 | Vue 3组合式 | 前端工程师必备

实测 Vue 3组合式 API 是前端工程师必备技能。我最近在项目里用它重构了一个老组件，发现它比选项式更直观，尤其在处理响应式数据和逻辑复用时。你得别傻乎乎地照搬选项式的写法，组合式 API 用 setup 和 script setup 会更顺手。别看官方文档讲得明白，实际用起来还是得靠实测。我之前用 script setup 时，忘了在模板里用 defineExpose 暴露方法，结果父组件调用失败，找了半天才发现。你现在用 Vue 3 开发，必须掌握这个。如果你还在用选项式，那真得好好学学组合式 API，别浪费时间了。

我之前做性能优化时，发现 Vue 3组合式 API 的 ref 和 reactive 用法很关键。你得ref 是包装值，reactive 是直接响应对象。别混着用，否则在模板里绑定会出问题。有一次我用 reactive 包装一个对象，然后在函数里修改它的属性，结果视图没更新。后来发现，因为 reactive 是响应式对象，修改属性得用 .value 才能触发更新。这个细节我差点没搞明白，但实测后就记住了。你要是不注意这点，可能会在开发过程中卡很久。

有些时候，你得用 Vue 3组合式 API 的 watchEffect 来处理副作用。它比 watch 更方便，因为不用显式写依赖数组。但也要小心，别让它跑得太频繁。我之前用 watchEffect 监听一个数组，结果每次数据变化都会重新执行，导致页面卡顿。后来改用 watch 传入依赖数组，性能明显提升。这个经验我挺有感触，用 watchEffect 时一定要控制好执行频率，否则容易踩坑。

Vue 3组合式 API 的 toRef 很实用，特别是当你需要将响应式对象的属性拆成单独的 ref。我之前用 toRef 处理一个配置对象，结果因为没用它，导致在模板里绑定属性时出错。实测后才明白，toRef 能保留响应性，还能让属性单独被监听。你要是经常需要拆分对象属性，这个函数就值得学。别看它简单，实际用起来能帮你省不少事。

我之前在项目里用 Vue 3组合式 API 的 defineProps 和 defineEmits，结果因为没在 setup 里写 return，导致组件无法接收 props 或触发事件。这事儿我折腾了半宿，最后在文档里找到一个关键点：defineProps 和 defineEmits 必须在 setup 里 return，否则不会生效。你得记住了，别像我一样犯这种低级错误。实测的时候，一定要检查返回值是否正确。