Vue3中的toRef 与 toRefs

一、toRef

const info = reactive({
  name: 'Tony',
  greet: 'Hello'
})
// 复制 info 里的 greet 属性
const rGreet = toRef(info, 'greet')
function setGreet(){
  rGreet.value='haha'
}

  <div>{{info.greet}}</div>
  <div>{{rGreet}}</div>
  <button @click="setGreet">setGreet</button>

二、toRefs

● toRefs 函数用于将一个响应式对象转换为一个包含多个属性的 ref 对象集合。
● toRefs 接收一个响应式对象作为参数。
● toRefs 返回一个对象，该对象中的每个属性都是 ref 对象，通过该 ref 对象可以访问原始响应式对象的对应属性。修改 ref 对象的值会影响到原始对象。
● toRefs: 复制 reactive 里的所有属性并转成 ref

const info = reactive({
  name: 'Tony',
  greet: 'Hello'
})
// 复制 info 
const rGreet = toRefs(info)
function setGreet(){
  rGreet.name.value='tom'
  rGreet.greet.value='haha'
}

  <div>{{info.greet}}</div>
  <div>{{info.name}}</div>
  <div>{{rGreet.name.value}}==={{rGreet.greet.value}}</div>
  <button @click="setGreet">setGreet</button>