说一下 toRef、toRefs，以及他们的区别

本文主要是介绍说一下 toRef、toRefs，以及他们的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

toRef：创建一个新的Ref变量，转换Reactive对象的某个字段为Ref变量
toRefs：创建一个新的对象，它的每个字段都是Reactive对象各个字段的Ref变量

说一下toRef
先定义一个reactive对象

interface Member {id: numbername: string
}
const userInfo: Member = reactive({id: 1,name: 'White'
})
console.log('userInfo=', userInfo)

如果想转换userInfo对象的name这个字段为Ref变量，可以进行如下操作：let nameR = toRef(userInfo, 'name')
此时，这个nameR是一个Ref变量，
所以，之后在读取和赋值时，就要使用nameR.value来操作，
所以，在重新给nameR赋值时，会同时更新nameR 和 userInfo.name的值

let nameR = toRef(userInfo, 'name')
console.log('nameR是一个Ref变量，值=', nameR.value)/**
* @name editNameR
* @description 修改 nameR 的值
*/
const editNameR = () => {nameR.value = 'edit-White'// 可以看到，在重新给`nameR`赋值后，`nameR` 和 `userInfo.name`的值都同时更新了console.log('edit - nameR=', nameR.value)console.log('edit - userInfo=', userInfo)
}

toRef也可以接收一个数组，此时第二个参数，是数组的下标

let wordList = reactive(['a', 'b', 'c'])
let a = toRef(wordList, 0)
console.log('a=', a.value) // a
console.log('wordList[0]=', wordList[0]) // a

对象 - 设置默认值
如果 Reactive 对象上有一个属性本身没有初始值，可以传递第三个参数进行设置（默认值仅对 Ref 变量有效）

interface MemberCopy {id: numbername: stringage?: number // age属性，因为是可选的，因此默认值会是`undefined`
}
// 声明变量时，省略`age`属性
const theInfo: MemberCopy = reactive({id: 1,name: 'Black'
})// 此时，为了避免程序运行错误，可以指定一个初始值，但初始值仅对 Ref 变量有效，不会影响 Reactive 字段的值
let age = toRef(theInfo, 'age', 18)
console.log('age=', age.value) // age= 18
console.log('theInfo.age=', theInfo.age) // theInfo.age= undefined// 除非重新赋值，才会使两者同时更新
age.value = 25
console.log(age.value) // 25
console.log(theInfo.age) // 25

数组 - 设置默认值

const words = reactive(['a', 'b', 'c'])// 当下标对应的值不存在时，返回`undefined`
const d = toRef(words, 3)
console.log(d.value) // undefined
console.log(words[3]) // undefined// 设置了默认值之后，就会对 Ref 变量使用默认值， Reactive 数组此时不影响
const e = toRef(words, 4, 'e')
console.log(e.value) // e
console.log(words[4]) // undefined

还有一个不推荐的特殊用法，
在 toRef 的过程中，如果使用了原对象上不存在的 key ，那么定义出来的 Ref变量的.value值将会是 undefined

举个例子
// 众所周知，White 是没有女朋友的
const girlfriend = toRef(userInfo, 'girl')
console.log('girlfriend=', girlfriend.value) // girlfriend= undefined
console.log('userInfo.girlfriend=', userInfo.girl) // userInfo.girl= undefined
// 此时 userInfo 对象上只有两个 Key
console.log(Object.keys(userInfo)) // ['id', 'name']/*如果，对这个不存在的`key的Ref变量(girlfriend)`进行赋值，那么原来的`Reactive对象(userInfo)`也会同步增加这个key(girl)，其值也会同步更新。
*/
girlfriend.value = 'Marry'
console.log('girlfriend=', girlfriend.value) // girlfriend= Marry
console.log('userInfo.girl=', userInfo.girl) // userInfo.girlfriend= Marry
console.log('看看userInfo的属性=', userInfo) // Proxy的girl、id、name

为什么强调不要在 TypeScript 里使用呢？因为在编译时，无法通过 TypeScript 的类型检查
如果非用不可，可以考虑使用any类型，如下：1、2、3

// 1、将该类型直接指定为 `any`
type Member = any
// 当然一般都是 `const userInfo: any`// 2、或者保持接口类型的情况下，允许任意键值
interface Member {[key: string]: any
}// 3、使用 `Record` 也是同理
type Member = Record<string, any>

说一下toRefs:
与toRef不同，toRefs只接收一个参数（一个reactive变量）

interface People {id: numbername: string
}// 声明一个`Reactive`变量，此时 `theKing`的TS类型是：const theKing: People
const theKing: People = reactive({id: 1,name: 'Black'
})
console.log('theKing=', theKing)// 传给`toRefs`作为入参，此时，这个新的`useToRefs`变量的TS类型就不再是`People`了，而是：const useToRefs: ToRefs<People>
const useToRefs = toRefs(theKing)
console.log('useToRefs=', useToRefs)// 也可以重新编写一个新的类型来指定它，因为每个字段都是与原来关联的 Ref 变量，所以也可以这样声明：
interface newPeople {id: Ref<number>name: Ref<string>
}
const useToRefsCopy: newPeople = toRefs(theKing)
console.log('useToRefsCopy=', useToRefsCopy)话都到这了，其实，日常使用时并不需要手动指定其类型， TypeScript会自动推导，可以节约非常多的开发工作量

对数组进行转换

const charList = reactive(['a', 'b', 'c'])
const charListRefs = toRefs(charList)
console.log('charListRefs=', charListRefs)
console.log('charListRefs[0]=', charListRefs[0].value) // charListRefs[0]= a

解构与赋值，
这一点和直接解构 Reactive 变量有非常大的不同，直接解构 Reactive 变量，得到的是一个普通的变量，不再具备响应

// 用 `toRefs` 转换后的 `Reactive对象或数组` 支持ES6的解构，并且`不会失去响应性`，因为解构后的每一个变量都具备响应性。
const { name } = toRefs(theKing)
console.log('name=', name.value) // name= Black// 此时，对解构出来的变量重新赋值，原来的变量也会同步更新
name.value = 'Tom'
console.log('重新赋值后-name=', name.value) // 重新赋值后-name= Tom
console.log('重新赋值后-theKing', theKing.name) // 重新赋值后-theKing Tom// ---------------------------- 看下面这个例子 ----------------------------/*以一个计算器函数为例，这一次将其修改为内部有一个 Reactive 的数据状态中心，在函数返回时解构为多个 Ref 变量，这样在调用 useCalculator 函数时，可以通过解构直接获取到 Ref 变量，不需要再进行额外的转换工作。
*/
interface CalculatorState {num: number,step: number // 每次计算时要增加的幅度
}
// 声明一个 “使用计算器” 的函数
const useCalculator = () => {// 通过数据中心的形式，即中管理内部变量const state: CalculatorState = reactive({num: 0,step: 10})const add = () => {state.num += state.step}return {...toRefs(state),add}
}// 解构出来的 `num` 和 `step` 都是 Ref 变量
const { num, step, add } = useCalculator()
console.log('num=', num.value) // num= 0
console.log('step=', step.value) // step= 10
// 调用计算器的方法，数据也是会得到响应式更新
add()
console.log('调用add()方法之后，num=', num.value) // 调用add()方法之后，num= 10