前端 - vue3 - - toRef与toRefs的区别

1、toRef

为目标对象某个属性创建一个单个的ref对象 当源对象变更时 新ref对象会同步源对象数据 

如果目标对象不存在 则会创建一个值为undefined的ref对象

const myObj = {
  name:'张三',
  age:18
}

const myName = toRef(myObj,'name')
console.log(myName.value) // 输出 张三

myObj.name = '李四'
console.log(myName.value) // 输出 李四

const mySex = toRef(myObj,'sex')
console.log(mySex.value) // undefined

const my = toRef(myObj)
console.log(my.value) // 输出 {name:'李四',age:18}

2、toRefs

将目标对象的每个数据都转变为ref对象 目标对象依旧为普通对象 当源对象更新时 新对象也会同步 支持解构

const myObj = {
  name:'张三',
  age:18
}

const {name,age} = toRefs(myObj)
console.log(name.vlaue,age.value) // 输出 张三 18

myObj.age = 20
console.log(age.value) // 输出 20

const my = toRefs(myObj)
console.log(my) // 输出 {name:ObjectRefImpl,age:ObjectrefImpl}

总结：

	toRef	toRefs
作用对象	单个属性	包含所有属性的对象
返回值	单个ref对象	所有属性为ref对象的普通对象
应用场景	只需要获取单个响应性对象	需要将普通对象中的所有属性 以响应性对象形式解构出来
目标对象不存在时	返回值为undefined的ref对象	报错