网站公司排行榜,长沙微信群,免费好用的企业邮箱,东莞网页如何制作toRef#xff1a;创建一个新的Ref变量#xff0c;转换Reactive对象的某个字段为Ref变量 toRefs#xff1a;创建一个新的对象#xff0c;它的每个字段都是Reactive对象各个字段的Ref变量 说一下toRef 先定义一个reactive对象
interface Member {id: numbername: string
}
c…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 Recordstring, 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: ToRefsPeople
const useToRefs toRefs(theKing)
console.log(useToRefs, useToRefs)// 也可以重新编写一个新的类型来指定它因为每个字段都是与原来关联的 Ref 变量所以也可以这样声明
interface newPeople {id: Refnumbername: Refstring
}
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
