Ref&toRef

toRef和ref都可以用来创建响应式数据,但它们有以下关键区别:

• 数据来源不同

ref是直接创建响应式数据;

toRef是基于已有的响应式对象创建的一个ref对象。

• 数据关系不同

ref创建的数据和原数据没有任何关系;

toRef创建的ref数据与源对象中的属性保持引用关系。

• 使用场景不同

ref常规的响应式数据场景;

toRef适合需要保留数据关系的场景,比如解构中的一个属性需要为ref。

  
代码示例:  
  
Copy code  
  
// refdemo  
  
const count = ref(1)  
  
// toRef demo  
  
const state = reactive({  
  foo: 1,  
  bar: 2  
})  

const fooRef = toRef(state, 'foo')
fooRef与state.foo之间仍然保留着引用关系,这就是toRef的特点。

总结:

ref直接创建响应式数据,toRef基于已有的响应式数据创建
toRef的响应式数据保持与源数据的引用关系

我们可以将响应式数据比作一个箱子,箱子里可以装各种物品。

ref就像是在空地上直接造了一个新箱子,然后把物品放入箱子里。
而toRef more像是我们已经有了一个装满东西的大箱子,需要从里面取出一样物品放到一个单独的小箱子中。这个小箱子和大箱子之间还有联系,如果大箱子里的这个物品变了,小箱子里的也会变。
举个例子:

//ref  
let fruitsBox = ref(['Apple','Banana'])   
  
// toRef  
let basket = reactive({  
  fruits: ['Apple','Banana'],  
  books: []  
})  

let fruitsBox = toRef(basket, 'fruits')
ref直接创建了一个果篮作为箱子
而toRef是从装满东西的大篮子里取出了一个果篮
它们之间的关系就像直接造箱子和从大箱提出小箱的关系。