在 Vue.js 3 中，为什么我必须在 ref 上使用值属性，而不是在 reactive 上？

Question

基本上，标题已经说明了一切：在Vue.js 3中，为什么我必须在ref上使用value 属性，而在reactive?

我知道 ref 用于简单值，例如布尔值、数字……，而 reactive 用于复杂值，例如 objects 和数组。我没有得到的是：

为什么我要访问 ref 的值时需要指定 value，但如果我使用 reactive 则不需要？这不是 API 中的不一致，还是存在必须这样的实际技术原因？
为什么我不能两者兼用？换句话说：是否有技术原因导致没有一个函数根据给定值的类型来决定如何在内部包装它？

我认为我遗漏了一些东西，这并不容易。有人可以帮忙吗？

Answer 1

是的，Ref 和 Reactive 都是反应式变量包装器。

const refVar = ref(true)
const reactiveVar = reactive({ haha: 'LoL' })

这里 refVar 和 reactiveVar 都只是包装变量，以保持其内部值的反应性。正如您所说，ref 和 reactive 之间的区别在于 ref 用于单个变量，而 reactive 用于 dictionary-structured 变量。

ref 关注其 value 属性的变化，一旦发生变化，它就会发出反应事件，以便观察者可以自动更新。但是 reactive 照顾它的所有属性。

如果只使用反应式，保持单个变量的反应式会很不舒服。

const refSingle = reactive({ value: 'I wanna be used with Ref' })

你应该一直在模板端调用 refSingle.value。

如果只使用 ref，将很难保持 dict-typed 变量的反应性。

const reactiveDict = ref({
  type: 'dictionary',
  purpose: 'reactive'
})

在这种情况下，如果你在脚本中使用它，你应该每次都使用value 属性。

reactiveDict.value = {
  ...reactiveDict.value,
  purpose: 'ref'
}

在这种情况下，您可以使用 reactive 而不是 ref。

In Vue.js 3, why do I have to use the value property on ref, but not on reactive?