浏览器如何推广自己网站,网站设计 联系,中国制造网入驻,wordpress 创建招生网isRef()
isRef()#xff1a;检查某个值是否为 ref。
isRef函数接收一个参数#xff0c;即要判断的值。如果该参数是由ref创建的响应式对象#xff0c;则返回true#xff1b;否则#xff0c;返回false。
import { ref, isRef } from vue
const normalValue 这是一个普通…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)) // trueisRef() 可以作为类型守卫
isRef()的返回值一个类型判定因此 isRef() 可以被用作类型守卫。 类型判定type predicate的概念 在 TypeScript 中类型判定是一种特殊类型的函数它用于在运行时确定一个值的类型。类型判定函数的返回值是一个类型谓词它的形式为参数名 is 类型。当类型判定函数返回true时TypeScript 编译器会将参数的类型缩小为指定的类型。 在条件判断中的类型缩小当使用isRef()进行类型判断后TypeScript 可以在后续的代码中根据判断结果进行类型缩小。 在if分支中变量的类型被确定为响应式对象。在else分支中变量的类型被确定为非响应式对象。
示例
import { ref, isRef } from vuelet value: unknown
// 在条件判断中的类型缩小
if (isRef(value)) {// 在这个分支中TypeScript 知道 value 是一个由 ref 创建的响应式对象// value 的类型被收窄了Refunknownconsole.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)) // trueisReadonly()
isReadonly()检查传入的值是否为只读对象。
import { reactive, readonly } from vue;
let reactiveObj reactive({name: 这是一个reactive创建的响应式,age: 18
})let readonlyObj readonly({message: helloreadonly,
})console.log(isReadonly(readonlyObj)) // true
console.log(isReadonly(reactiveObj)) // falseisProxy()
isProxy()检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。
