isRef:检查一个值是否为一个 ref 对象。
isReactive:检查一个对象是否由 reactive 创建的响应式数据。
isReadonly:检查一个对象是否由 readonly 创建的只读数据。
isProxy:检查一个对象是否由 reactive 或者 readonly 创建的数据。
响应式数据判断的使用:
检测 ref 数据:
<template> <h2>{{ sum }}</h2> </template> <script> // 引入 isRef 函数 import { ref, isRef } from 'vue' export default { name: "Home", setup() { let sum = ref(0); // 检查一个值是否为一个 ref 对象 console.log( isRef(sum) ); // true return { sum } } } </script>
检测 reactive 数据:
<template> <h2>{{ info.name }} : {{ info.age }}</h2> </template> <script> // 引入 isReactive 函数 import { reactive, isReactive } from 'vue' export default { name: "Home", setup() { let info = reactive({ name: "张三", age: 18 }); // 检查一个对象是否由 reactive 创建的响应式数据 console.log( isReactive(info) ); // true return { info } } } </script>
检测 readonly 数据:
<template> <h2>{{ info.name }} : {{ info.age }}</h2> </template> <script> // 引入 isReadonly 函数 import { readonly, isReadonly } from 'vue' export default { name: "Home", setup() { let info = readonly({ name: "张三", age: 18 }); // 检查一个对象是否由 readonly 创建的只读数据 console.log( isReadonly(info) ); // true return { info } } } </script>
检测 reactive 或 readonly 数据:
<template> <h2>{{ info.name }} : {{ readInfo.age }}</h2> </template> <script> // 引入 isProxy 函数 import { reactive, readonly, isProxy } from 'vue' export default { name: "Home", setup() { let info = reactive({ name: "张三", age: 18 }); let readInfo = readonly(info); // 检查一个对象是否由 reactive 或者 readonly 创建的数据 console.log( isProxy(info) ); // true console.log( isProxy(readInfo) ); // true return { info, readInfo } } } </script>