面试题：Vue中ref与reactive在基本数据类型响应式处理上的区别

Question

在Vue Composition API中，ref与reactive都用于创建响应式数据。请详细阐述当处理基本数据类型（如字符串、数字）时，ref与reactive在声明方式、使用场景以及原理上有哪些区别？

Answer 1

声明方式

• ref：通过ref函数声明，传入基本数据类型值。例如：const count = ref(0)。这里ref会将传入的基本类型值包装成一个包含value属性的对象，实际的值存储在value中。
• reactive：reactive函数不能直接用于基本数据类型，它只能处理对象（包括数组和普通对象）。如果传入基本数据类型，reactive会返回一个普通对象，不具备响应式。例如const num = reactive(1)，num只是一个普通对象，并非响应式数据。

使用场景

• ref：适用于处理单个基本数据类型的响应式需求。在模板中使用时，不需要额外的.value，Vue会自动解包。在逻辑代码中访问和修改值时需要使用.value。比如在一个计数器功能中，ref可以方便地声明一个响应式的计数变量。
• reactive：主要用于处理复杂的对象结构（包含多个属性）的响应式。由于不能直接处理基本数据类型，所以在处理单个基本数据类型时不适用。当数据结构较为复杂，例如一个用户信息对象包含姓名、年龄、地址等多个属性时，reactive是更好的选择。

原理

• ref：ref利用Object.defineProperty()将传入的值包装成一个带有getter和setter的响应式对象，这个对象有一个value属性来存储实际的值。当访问或修改ref的value属性时，getter和setter会通知Vue进行依赖收集和触发更新。
• reactive：reactive基于ES6的Proxy实现，它通过创建一个代理对象来拦截对目标对象的各种操作（如读取、写入、删除等）。当操作发生时，Proxy会通知Vue进行依赖收集和触发更新。由于Proxy只能代理对象，所以无法直接用于基本数据类型。