ref和reactive分别适应什么
reactive()
只接受对象作为参数, 不支持 JS 原始类型 (String, Boolean,Number,BigInt,Symbol,null,undefined)。【相关推荐:vue.js教程】
ref()
会在后台调用 reactive()
因 reactive()
支持对象,而 ref()
内部调用 reactive()
,故两个方法都支持对象
但是, ref()
有一个 .value
属性可以用来重新赋值,而 reactive()
不可重新赋值(会丢失响应性)
使用场景
ref()
当数值类型是 JS 原始类型时使用 (例如 'string'
, true
, 23
)
当赋值对象,且后续需要被重新赋值时 (例如一个数组 - 更多请见这里)
reactive()
当数值类型是对象,且不需要重新赋值时使用,ref()
内部也是调用 reactive()
,无需徒增开销
总结
ref()
似乎是正确的选择,因为它支持全部的对象类型,而且可以通过 .value
重新赋值。 ref()
很好,但是当你熟悉 API 之后,就知道 reactive()
开销更小,可能发现这个更能满足需求。
- reactive的参数一般是对象或者数组,他能够将复杂数据类型变为响应式数据。
- reactive的响应式是深层次的,底层本质是将传入的数据转换为Proxy对象