当前位置：首页 > article >正文

Vue3 响应式工具函数isRef()、unref()、isReactive()、isReadonly()、isProxy()

article 2024/9/21 18:52:58

`isRef()`

isRef()：检查某个值是否为 ref。

isRef函数接收一个参数，即要判断的值。如果该参数是由ref创建的响应式对象，则返回true；否则，返回false。

import { ref, isRef } from 'vue'
const normalValue = '这是一个普通值'
const refValue = ref('这是一个 ref 创建的响应式值')
console.log(isRef(normalValue))  // false
console.log(isRef(refValue))     // true

`isRef()` 可以作为类型守卫

isRef()的返回值一个类型判定，因此 isRef() 可以被用作类型守卫。

类型判定（type predicate）的概念
在 TypeScript 中，类型判定是一种特殊类型的函数，它用于在运行时确定一个值的类型。类型判定函数的返回值是一个类型谓词，它的形式为参数名 is 类型。当类型判定函数返回true时，TypeScript 编译器会将参数的类型缩小为指定的类型。

在条件判断中的类型缩小：当使用isRef()进行类型判断后，TypeScript 可以在后续的代码中根据判断结果进行类型缩小。
- 在if分支中，变量的类型被确定为响应式对象。
- 在else分支中，变量的类型被确定为非响应式对象。

示例：

import { ref, isRef } from 'vue'

let value: unknown
// 在条件判断中的类型缩小
if (isRef(value)) {
  // 在这个分支中，TypeScript 知道 value 是一个由 ref 创建的响应式对象
  // value 的类型被收窄了：Ref<unknown>
  console.log((value as any).value)
} else {
  // 在这个分支中，TypeScript 知道 value 不是由 ref 创建的响应式对象
  console.log(value)
}

`unref()`

unref()接收一个参数，如果参数是 ref，则返回内部值，否则返回参数本身。

unref()的本质是 val = isRef(val) ? val.value : val 计算的语法糖：unref() 的功能实际上等同于使用 isRef() 函数进行判断，如果参数是 ref 对象，则取其 .value 属性，否则直接返回参数本身。

import { reactive, ref, unref } from 'vue';

const refValue = ref('这是一个 ref 创建的响应式值')
const reactiveValue = reactive({
  name: '这是一个reactive创建的响应式',
  age: 18
})
const normalValue = '这是一个普通值'

const unrefValue = unref(refValue)
const unrefReactiveValue = unref(reactiveValue)
const unrefNormalValue = unref(normalValue)

console.log('refValue:', refValue)
console.log('unrefValue:', unrefValue)

console.log('reactiveValue:', reactiveValue)
console.log('unrefReactiveValue:', unrefReactiveValue)

console.log('normalValue:', normalValue)
console.log('unrefNormalValue:', unrefNormalValue)

查看控制台打印结果：
在这里插入图片描述

`isReactive()`

isReactive()：检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。
isReactive()接收一个参数，即要判断的对象。如果该参数是由 reactive() 或 shallowReactive() 创建的响应式对象，则返回true；否则，返回false。

import { reactive, isReactive } from 'vue'
const normalObj = { message: '普通对象的值' }
const reactiveObj = reactive({ message: 'reactive 创建的响应式对象的值' })
console.log(isReactive(normalObj))   // false
console.log(isReactive(reactiveObj))   // true

`isReadonly()`

isReadonly()：检查传入的值是否为只读对象。

import { reactive, readonly } from 'vue';
let reactiveObj = reactive({
  name: '这是一个reactive创建的响应式',
  age: 18
})

let readonlyObj = readonly({
  message: 'hello，readonly！',
})

console.log(isReadonly(readonlyObj))   // true
console.log(isReadonly(reactiveObj))   // false