对于字符串或数字等简单变量,ref 与shallowRef 比较

nor*_*orr 5 vue.js vuejs3

我知道这shallowRef对于资源来说更轻,因为它只监视数组键的更改或直接值的更改。例如,它不会观察对象字段的深处。凉爽的。

但是字符串或数字呢?使用这些shallowRef替代品有意义吗?ref有影响吗?

或者字符串的 ref 默认是浅的?

我的想法是 - 也许最好始终用于shallowRef所有数据,并ref仅在真正需要时将其更改为正常(例如带有对象的数组)。这样,我就不会ref在不需要的时候错误地使用更多消耗资源的资源。

non*_*oat 2

总而言之:

对于原始类型(字符串、数字等)来说,没有什么区别,是相同的(开销非常小ref()

文档指出;

shallowRef()通常用于大型数据结构的性能优化,或与外部状态管理系统的集成。

与 不同的是ref(),浅引用的内部值按原样存储和公开,并且不会被深度响应。只有 .value 访问是反应性的。

使用

ref()什么时候..

  • 它是一个原语(例如 'string'、true、23 等)
  • 这是一个您需要稍后重新分配的对象(如数组 - 此处有更多信息)

shallowRef()什么时候..

  • 避免深度转换
  • 对于不需要深度反应的大数据结构

reactive()什么时候..

  • 它是一个不需要重新分配的对象,并且您希望避免开销ref()(无 .value 访问,请参见下文)

反应性有趣的事实

  • reactive()只接受对象,而不是 JS 基元(字符串、布尔值、数字、BigInt、符号、null、未定义)
  • ref()reactive()正在幕后召唤

由于reactive()适用于对象和ref()调用reactive(),因此对象适用于两者 ,但是,ref()具有.value用于重新分配的属性,reactive()没有此属性,因此无法重新分配