1

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

我知道这ref是针对简单值，例如布尔值、数字……，以及reactive针对复杂值，例如对象和数组。我没有得到的是：

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

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

4

1 回答 1

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.

于 2020-09-10T10:32:34.240 回答