Vue3 响应式数据：ref 和 reactive 详解

Vue3 中的 ref 和 reactive 都是用来创建响应式数据的方法，但它们有一些区别。

'ref':

• 'ref' 函数接收一个参数，可以是任意类型的值，包括基本类型和对象类型。
• 'ref' 函数返回一个包装后的对象，这个对象具有 'value' 属性，可以通过 'value' 属性来访问和修改值。
• 'ref' 函数返回的对象还有一个特殊属性 '__v_isRef'，用来标识这个对象是 'ref' 创建的。

'reactive':

• 'reactive' 函数接收一个参数，这个参数必须是一个普通的 JavaScript 对象。
• 'reactive' 函数返回一个响应式的代理对象，这个代理对象会拦截对象属性的访问和修改操作，从而使这些操作变成响应式的。
• 'reactive' 函数返回的代理对象没有任何特殊的属性或标识。

总结：

• 如果要创建一个响应式的基本类型数据，使用 'ref'。
• 如果要创建一个响应式的对象类型数据，使用 'reactive'。