前端面试题

1.Ref 和 Reactive： 它们的区别是什么？分别在什么场景下使用？如何对 Reactive 对象进行解构而不失去响应性？

• ref 的适用场景：

  • 存储基本类型数据（如字符串、数字、布尔值）
  • 存储需要独立访问的引用类型（如单个对象或数组）
  • 需要在模板中直接使用的响应式数据（模板中自动解包，无需 .value）

• reactive 的适用场景：

  • 存储复杂的对象或数组
  • 当你希望将相关属性组织在一起时
  • 需要深层响应式的嵌套对象

对 Reactive 对象解构而不失去响应性

直接解构 reactive 对象会导致失去响应性，因为解构会创建新的变量，脱离了 Proxy 的控制： 解决方案：使用 toRefs 将 reactive 对象转换为包含 ref 的对象，再进行解构：

toRefs 会为源对象的每个属性创建一个对应的 ref，这样在解构后仍能保持响应性连接。这在组合函数返回响应式对象时特别有用，允许消费者解构获取其中的属性而不失去响应性。

总结来说，ref 更通用灵活，reactive 更适合组织复杂对象，而 toRefs 则是在需要解构 reactive 对象时保持响应性的关键工具。