Vue 3 中 ref 和 reactive 到底该怎么选？两者有什么区别？

最近在写组合式 API 的项目，发现 ref 和 reactive 都能定义响应式数据，但用起来有些场景会踩坑。想请前辈讲讲两者在原理和使用上的区别，以及各自更适合什么场景。