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

本教程将介绍ref、toRef和toRef之间有什么区别的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

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

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

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

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

_{嗯..为什么？}

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

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

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

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

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

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

但此对象的可能包含值而不是引用。如果将Value属性直接复制到另一个位置，则副本将失去与对象的连接及其反应性。这就是toRef有用的地方。

toRef将单个reactive对象属性转换为维护其与父对象的连接的ref：

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

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

toRefs将所有属性转换为属性为refs：

的纯对象

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

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

好了关于ref、toRef和toRef之间有什么区别的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。

快速导航