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