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

Question

基本上，标题已经说明了一切：In Vue.js 3, Why do I have to use the valueproperty on ref, but not onreactive？

\n

我知道这ref是针对简单值，例如布尔值、数字、\xe2\x80\xa6，并且reactive针对复杂值，例如对象和数组。我不明白的是：

\n

为什么我需要指定value何时访问 aref的值，但如果使用则不需要指定reactive？这不是 API 中的不一致吗？或者是否存在实际的技术原因？？

\n
为什么我不能同时使用其中之一？换句话说：是否有技术原因导致没有一个函数根据给定值的类型决定如何在内部包装它？
\n

\n
我认为我错过了一些东西，但事实并非如此。有人可以帮忙吗？
\n

Answer 1

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

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

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

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

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

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

并且您应该refSingle.value始终在模板端调用。

如果仅使用 ref，则很难保持 dict 类型变量的反应性。

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

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

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

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