您现在的位置是:首页 >技术交流 >06.toRef 和 toRefs网站首页技术交流

06.toRef 和 toRefs

龙华军 2023-06-27 04:00:03
简介06.toRef 和 toRefs

学习要点:
1.toRef 和 toRefs
本节课我们来要了解一下 Vue3.x 中的 ref 两个周边 API 的用法;
一.toRef 和 toRefs
1. toRef 可以将源响应式对象上的 property 创建一个 ref 对象;
const obj = reactive({
name : 'Mr.Lee',
age : 100
})
// ref 和 toRef 都是给一个静态数据实行响应式,转换成 ref 对象
// ref 是复制操作,和之前的对象断了关联;
// toRef 是引用操作,当修改数据时,原数据也会被修改;
const nameRef = ref(obj.name)
const nameToRef = toRef(obj, 'name')
console.log(nameRef)
console.log(nameToRef)
nameRef.value = 'Mr.Wang'
nameToRef.value = 'Mr.Wang'
console.log(obj.name)
PS:手册上使用的 prop 传递,因为我们还没有学 setup(prop),我们换个例子;
const obj = reactive({
name : 'Mr.Lee',
age : 100
})
const info = {
// 响应式操作,使用 ref(),则无法获取原数据的修改信息
name : toRef(obj, 'name')
}
setTimeout(() => {
// 由于使用了 toRef,原数据修改后,这里会更新到最新数据
console.log(info.name.value)
}, 1000)
// 修改原数据,关联被 toRef 的数据
obj.name = 'Mr.Wang' 2. toRefs 会将原来响应式对象转换为普通对象,并将内部所有 property 都 ref;
3. 比如:我们要把一个函数里响应式对象里的 property 解构出来时还保持响应式;
const userF = () => {
const state = reactive({
foo : 1,
bar : 2
})
return toRefs(state)
}
const { foo, bar } = userF()
console.log(foo)
console.log(bar)

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。