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

Question

基本上，标题已经说明了一切:在 Vue.js 3 中，为什么我必须使用 value位于 ref 的房产，但不在 reactive 上?
我了解 ref用于简单值，例如 bool 值、数字……，以及 reactive适用于对象和数组等复杂值。我没有得到的是:

为什么我需要指定value当我想访问 ref的值，但如果我使用 reactive 则不是?这不是 API 中的不一致，还是有实际的技术原因必须这样？

为什么我不能两者都用一个？换句话说:是否有技术原因没有一个函数根据给定值的类型决定如何在内部包装它？

我假设我错过了一些东西，这并不容易。任何人都可以帮忙吗？

Answer 1

是的，Ref 和 Reactive 都是响应式(Reactive)变量包装器。

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

这里都是 refVar和 reactiveVar只是包装变量，以保持其内部值的 react 性。
正如你所说， ref 之间的区别和 reactive是 ref用于单个变量和 reactive用于字典结构的变量。 ref关注其 value 中的更改属性，一旦改变它就会发出 react 事件，以便观察者可以自动更新。但是 reactive照顾它的所有属性。
如果您只使用响应式，那么为单个变量保持响应式会非常不舒服。

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

你应该调用 refSingle.value一直在模板方面。
如果仅使用 ref，则很难保持对 dict 类型变量的 react 性。

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

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

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

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