vue3 toRef和toRefs的使用

toRef和toRefs
作用：创建一个ref对象,其value指向另一个对象中得某一个属性
语法：const name = toRef(data,‘name’)
应用：要将响应式对象中得某个属性单独提供给外部使用时
拓展：toRefs与toRef功能一致 但可以批量创建多个ref对象 语法：toref(data)

为了能在template写的简短,引用toRef处理
被toRef包裹的响应式,修改时候直接读取原来响应式reactive代理属性 实时响应变化
不使用toRef则响应式的修改就会出现Bug

// 使用toRef进行对某个重新赋值的属性添加响应式
const skill = toRef(data,‘skill’)
const age = toRef(data,‘age’)
const name = toRef(data,‘name’)
const salary = toRef(data,‘salary’)
console.log(skill,‘哈哈哈’)
return {data,skill,age,salary,name}

toRefs为了完善toRef
1.toRefs可以直接处理多个属性的解构
2.可以简化代码

const allProps = toRefs(data)

 // return {data,skill,age,salary,name} 
   return {data,...allProps} //对上面return进行简化代码
  
   打印allProps结果：
   age: ObjectRefImpl {_object: Proxy, _key: 'age', __v_isRef: true}
   name: ObjectRefImpl {_object: Proxy, _key: 'name', __v_isRef: true}
   position: ObjectRefImpl {_object: Proxy, _key: 'position', __v_isRef: true}
   salary: ObjectRefImpl {_object: Proxy, _key: 'salary', __v_isRef: true}
   skill: ObjectRefImpl {_object: Proxy, _key: 'skill', __v_isRef: true}

使用完整示例如下：
template

js