Vue3(六)reactive vs ref(下)

ref相关的函数

ref 是 vue 为了实现简单类型的响应性,而设计的一个函数,同时也支持对象类型(会把对象变成reactive的形式)。所以使用范围非常广泛。

unref

如果参数为 ref,则返回内部值,否则返回参数本身。

        // 简单类型
        const string = Vue.ref('jyk')

        // 对象
        const person = Vue.ref({
          name: 'jyk',
          age: 100
        })

        // unref
        console.log('person:',unref(person))
        console.log('personToRaw:',toRaw(person))
        console.log('personUnrefToRaw:',toRaw(Vue.unref(person)))
        console.log('string:',unref(string))
        console.log('stringUnrefToRaw:',toRaw(Vue.unref(string)))
        console.log('unref:',unref({name:'unref'}))

打印看效果


020ref-unref.png

不知道为啥要设计这样的函数,感觉好鸡肋呀。反复测试了一下,大概是这个意思。

我想得到数据原型,但是又不知道传递过来的是个js类型,还是ref的形式。

那么你就可以用unref来取原值。

但是这个只限于简单类型,比如number、string。但是如果原型是js对象的话,取出来的就是reactive的形式,并不是js对象。

如果想实现,不管是简单类型,还是对象类型,我都要原型的话,还得这样写。

toRaw(unref(person))

就是先用unref取(ref的)原型,然后再用toRaw取(reactive的)原型。
这种方式适合简单类型和对象类型。

toRef

简单的说,从一个reactive形式的对象里面,提取出来一个指定的属性,然后变成ref形式的对象,以便于保持属性的响应性。

        // toRef
        const person2 = Vue.reactive({
          name: 'jyk',
          age: 100
        })
        const personNameToRef = toRef(person2, 'name')
        console.log('toRef', personNameToRef)
        console.log('toRefValue', personNameToRef.value)

打印看效果


021ref-toRef.png

其实这个不是和

ref(person2.name)

一个意思吗?

toRefs

简单的说,就是批量的toRef。
toRef一次只能变一个属性,toRefs一次能把所有属性都变了。

        // toRef
        const person2 = Vue.reactive({
          name: 'jyk',
          age: 100
        })
        const personToRefs = Vue.toRefs(person2)
        console.log('toRefs', personToRefs)
        console.log('toRefs2', personToRefs.name)

打印看效果


022ref-toRefs.png
  • 应用场景(也许是个漏洞)
    在setup里面,操作props属性。
    因为在setup里面,props是不能直接使用的,
const foo = props 

这样会报错。
那么可以这么写:

const foo = toRefs(props)

注意,如果属性都是简单类型的话,修改foo,不会改变父组件里面的变量。
但是,如果属性是对象的话,修改foo就会改变父组件里面的对象。
所以使用的时候一定要慎重!

  • 应用场景,setup里的return
    如果定义了一个深层次对象,如果直接return的话,那么在模板里面就要使用{{person.name}}的形式来使用。
    如果想简化一下直接{{name}}的方式使用的话,就可以在return里面使用 ...toRefs的形式。
    比如这样:
return {
  person,
  ...personToRefs
}

这样模板里面可以直接使用{{name}}了。

注意,这里的“...”不是省略号的意思,而是ES6提供的一种“展开属性”的方式。

isRef

判断是不是ref形式的对象。
这个就比较简单了,不过我们还是跑一下代码。

        // isRef。对象定义在上面。
        console.log('reactive', Vue.isRef(person2))
        console.log('ref', Vue.isRef(person))
        console.log('object', Vue.isRef({name:'isRef'}))
        console.log('number', Vue.isRef(123))
 

打印看效果


023ref-isRef.png

官网

https://vue3js.cn/docs/zh/api/refs-api.html

你可能感兴趣的:(Vue3(六)reactive vs ref(下))