vue3 toRef和toRefs的使用和区别

1. toRef是把响应式对象的某一项值变为响应式的值，通常处理reactive定义的对象

        使用示例：

const man = reactive({ name: '小红', age: 18, like: 'hs'})
console.log('first', man)
const names = toRef(man, 'name')
// names为代理对象，man.name还是原本的值
console.log('second', man.name, names)

 输出结果：

2. toRefs是把代理对象的每一项值都变成响应式的，相当于toRef的for循环

 toRefs原理实现

// toRefs原理实现
const toRefs = (object: T) => {
  const mapList:any = {}
  for (let key in object) {
    mapList[key] = toRef(object, key)
  }
  return mapList
}

 一般的使用方法：解构取值

const man = reactive({ name: '小红', age: 18, like: 'hs'})
const {name, age, like} = toRefs(man)
console.log('third', name, age, like)

 输出结果：