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

我刚刚开始使用Vue 3和合成API。

我想知道ref、toRef和toRefs有什么区别？

---

解决方案

版本3ref

Aref是Vue 3中的反应性机制，其思想是将非对象包装在reactive对象中：

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

_{嗯..为什么？}

在JavaScript(和许多OOP语言)中，有两种变量：值和引用。

值变量： 如果变量x包含类似10的值，则它是值变量。如果要将x复制到y，则只复制值。将来对x所做的任何更改都不会更改y。

引用变量：但如果x包含对象，则它是引用变量。有了这些，y的属性会在x的属性更改时发生更改，因为它们都是引用相同的对象。(如果这让人吃惊，请使用vanilla JavaScript测试这一点。)

因此，这使得引用变量在某种意义上更动态，对反应性更有用，因为任何更改都可以很容易地反映在应用程序中的任何位置。即使对于简单的值变量，VUE也希望利用此功能，因此ref将这些变量包装在一个对象中，从而创建一个引用变量。

reactive

对于对象变量，不需要引用包装，因为它已经是引用类型。它只需要Vue的reactive功能(ref也有)：

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

但此对象的属性可能包含值而不是引用。如果将Value属性直接复制到另一个位置，则副本将失去与对象的连接及其反应性。这就是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>
}
*/