在Vue.js 3中，为什么我必须在ref上使用value属性，但在非active上使用呢？

问题描述

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

我知道ref用于简单值，例如布尔值，数字等，而reactive用于复杂值，例如对象和数组。我不明白的是：

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

我认为我错过了一些东西，而且那并不容易。有人可以帮忙吗？

解决方法

是的，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，将很难保持字典类型变量的反应性。

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

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

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

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