如何解决在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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。