ref、toRef和toRefs之间有什么区别

视图 3 ref

甲REF是用于Vue公司3的想法是包裹非对象在一个反应性的机构reactive对象：

接受一个内部值并返回一个反应性和可变的 ref 对象。ref 对象有一个.value指向内部值的属性。

_{嗯.. 为什么？}

了解在 JavaScript（和许多 OOP 语言）中，有两种类型的变量：值和引用。

如果一个变量x包含一个 value 5，那么如果你复制x到y，你就复制了一个值。将来对 的任何更改x都不会更改y。但是，如果x包含一个对象（引用类型），那么y 不变更如果x的性质发生变化，因为它们都指代相同的对象。

这使得引用类型更加动态；您可以复制它们并通过更改原件来更改副本，甚至可以通过更改副本来更改原件。Vue 想要利用这种能力，即使对于数字这样的值类型，它也允许你将它们“包装”在一个对象中以创建一个引用变量。

reactive

对于对象变量，不需要 ref 包装，因为它已经是引用类型。它只需要 Vue 的响应式功能（ref 也有）：

const state = reactive({
  foo: 1,
  bar: 2
})

但是如果这个对象的属性是值变量，它们自然就不是 refs。这意味着如果您要直接复制一个属性，您将失去与其父对象的连接。这toRef是有用的地方。

toRef

toRef将单个reactive对象属性转换为保持与父对象连接的 ref：

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')
/*
fooRef: Ref<number>,
*/

toRefs

toRefs将所有属性转换为具有 refs 属性的普通对象：

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
{
  foo: Ref<number>,
  bar: Ref<number>
}
*/