『引言』

本篇介绍isRef()、unref()这2个API。关于这2个API是用来干什么的，以及使用方法等等都会有说明。

『isRef()』

『isRef()定义』

检查某个值是否为 ref。是返回true，否则返回false。

『isRef()用法』

<template>
  <div>
    <h1>人物简介</h1>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}岁</p>
    <p>爱好：{{hobbies.join('、')}}</p>
    <p>地址：{{address.provice}} - {{ toRefCity }} </p>
    <p>描述：{{description}}</p>
  </div> 
</template>

<script setup>
import { ref, reactive, toRef, toRefs, isRef } from 'vue'
    const name = ref('pupu')
    const age = 10
    const hobbies = ref(['唱歌', '画画'])
    const address = reactive({
      provice: '浙江省',
      city: '杭州市'
    })
    const description = ref('一点也不可爱，不喜欢吃蜂蜜！')
    const toRefCity = toRef(address, 'city')
    const toRefsAddress = toRefs(address)

    // 判断是否为ref对象
    console.log(isRef(name), 'isRefname')
    console.log(isRef(age), 'isRefage')
    console.log(isRef(hobbies),'isRefhobbies')
    console.log(isRef(address),'isRefaddress')
    console.log(isRef(description),'isRefdescription')
    console.log(isRef(toRefCity),'isReftoRefCity')
    console.log(isRef(toRefsAddress),'isReftoRefsAddress')
</script>

『效果展示』

『isRef源码』

isRef源码如下⬇️：

export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
export function isRef(r: any): r is Ref {
  return !!(r && r.__v_isRef === true)
}

需要判断判断__v_isRef是否为true。

『unref()』

『unref()定义』

如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。

『unref()用法』

<template>
  <div>
    <h1>人物简介</h1>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}岁</p>
    <p>爱好：{{hobbies.join('、')}}</p>
    <p>地址：{{address.provice}} - {{ toRefCity }} </p>
    <p>描述：{{description}}</p>
  </div> 
</template>

<script setup>
import { ref, reactive, toRef, toRefs, unref } from 'vue'
    const name = ref('wnxx')
    const age = 3
    const hobbies = ref(['打羽毛球', '旅游'])
    const address = reactive({
      provice: '云南省',
      city: '丽江市'
    })
    const description = ref('非常的可爱，特别喜欢吃蜂蜜！')
    const toRefCity = toRef(address, 'city')
    const toRefsAddress = toRefs(address)

    // 打印
    console.log(unref(name))
    console.log(unref(age))
    console.log(unref(hobbies))
    console.log(unref(address))
    console.log(unref(description))
    console.log(unref(toRefCity))
    console.log(unref(toRefsAddress))
</script>

『unref()注意』

• unref(val) 相当于val=isRef(val)?val.value:val

『效果展示』

『unref源码』

unref源码如下⬇️：

export function unref<T>(ref: MaybeRef<T>): T {
  return isRef(ref) ? ref.value : ref
}