vue3中ref()和reactive()的区别

vue3提供了两种声明响应式数据的方式：ref()和reactive()。

reactive

reactive() 函数用于创建一个响应式对象或数组，返回的是一个原始对象的 Proxy。reactive() API 有两条限制：

1. 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），对 string、number 和 boolean 这样的 原始类型 无效。
2. 不可以随意地“替换”一个响应式对象，这将导致对初始引用的响应性连接丢失。当我们将响应式对象的属性赋值或解构至本地变量时，或是将该属性传入一个函数时，会失去响应性。

let state = reactive({ count: 0 })
// 上面的引用 ({ count: 0 }) 将不再被追踪（响应性连接已丢失！）
state = reactive({ count: 1 })

// n 是一个局部变量，同 state.count 失去响应性连接
let n = state.count
// 不影响原始的 state
n++

// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收一个普通数字，并且将无法跟踪 state.count 的变化
callSomeFunction(state.count)

ref

ref() 方法用于创建可以使用任何值类型的响应式变量，返回一个基于该值的响应式 ref 对象。ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象，ref 的 .value 属性也是响应式的。同时，当参数的值为对象类型时，会用 reactive() 自动转换它的 .value。

1. 一个包含对象类型值的 ref 可以响应式地替换整个对象。

const objectRef = ref({ count: 0 })
// 这是响应式的替换
objectRef.value = { count: 1 }

2. ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性。ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。

const obj = {
  foo: ref(1),
  bar: ref(2)
}

// 该函数接收一个 ref，需要通过 .value 取值，但它会保持响应性
callSomeFunction(obj.foo)

// 仍然是响应式的
const { foo, bar } = obj

总结

reactive() 和 ref() 都是用来定义响应式数据的。reactive()参数一般接受对象或数组，是深层次的响应式。ref()参数一般接收简单数据类型，若ref()接收对象为参数，本质上会转变为reactive方法。ref() 和 reactive() 本质我们可以简单的理解为ref是对reactive的二次包装。