Vue学习笔记-Vue3的toRef和toRefs

toRef

• 作用：创建一个ref对象，其value值指向与其绑定的数据对象中的某个属性，当toRef创建的对象值改变时，与其绑定的响应式对象中对应的属性也发生改变
• 导入：import {toRef} from 'vue'
• 使用：const name = toRef(data,'name')，其中data为响应式对象,'name'为其对应的属性的key
• 应用场景：将某个响应式对象中的某个属性单独给外部使用时

toRefs

• 作用：与toRef类似，但是可以批量创建多个ref对象
• 导入：import {toRefs} from 'vue'
• 使用：const obj = toRefs(data)

return {
	/*
	这里表示将data中的所有key-value都暴露在return的对象中
	该写法等价于:
	return {
		k1:v1,
		k2:v2,
		......
		kn:vn
	}
	其中 kx:vx都是data中的数据键值对
	*/
	...toRefs(data)
}