vue3 toref toRefs isRef unRef 简单介绍

这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

toRef 的使用，创建一个ref,必须有一个原响应式的对象，可以对ref进行传递，保持响应式链接自身的原属性(通俗的说就是在reactive对象里可以创建一个单独的ref属性，可以单独使用ref,并且可以保持reactive原链接) 简单写下代码

let obj = reactive({
    name: 'dasdasd',
    k: '1',
})
// 单独ref reactive对象里的属性
let f = toRef(obj,'name')
// 改变f
obj.name = '我变化了'
console.log('f',f)
console.log(obj.name)

可以看待log日志

个人看法，就是把reactive对象里面的属性，直接浅拷贝到一个新ref里，不过这种方法确实挺方便,两个不管谁改都是统一变化的 toRefs 转化一个响应式对象为普通对象，把响应式对象的属性转化为ref，这个我们就可以正常使用...解构reactive对象了，方便我们写代码了 简单写法

setup(){

let obj = reactive({
    name: 'dasdasd',
    k: 0,
})
console.log(obj)
let refsObj = toRefs(obj)
console.log(refsObj)
return {
   ...obj // 直接结构没有响应式
   ...refsObj // 保持响应式
}
}

可以看下打印数据 就明白了转化后属性变成了ref,我们在模版里我可以直接用reactive的属性了，不用写obj.name了，直接在模版里直接用name 就可以了

isRef 这个很简单 就是判断是不是ref对象的 是ref对象返回true 不是返回false

unRef 如果是一个ref值，就返回当前value，如果不是就返回本身的自己 它其实就是下面语法糖的写法

// unRef
let val = isRef(val)?val.value:val

不是ref对象截图

打印log

是ref对象截图

log

就简单介绍到这