Vue3.0API介绍中 isProxy,isReactive使用示例

Vue3.0API介绍中 isProxy,isReactive使用示例
Vue3.0API介绍中 isProxy,isReactive使用示例
 
isProxy
检查对象是否是由 reactive 或 readonly 创建的 proxy。
 
isReactive
检查对象是否是由 reactive 创建的响应式代理。
 
<script setup>
import { ref, isReactive, reactive } from "vue";
const count = ref(123);
 
const state = reactive({
  name: "John",
});
console.log(isReactive(state)); // -> true
 
console.log(isReactive(count)); // -> true
</script>
 
 
如果该代理是 readonly 创建的,但包裹了由 reactive 创建的另一个代理,它也会返回 true。
 
<script setup>
import { readonly, isReactive, reactive } from "vue";
 
const state = reactive({
  name: "John",
});
// 从普通对象创建的只读 proxy
const plain = readonly({
  name: "Mary",
});
console.log(isReactive(plain)); // -> false
 
// 从响应式 proxy 创建的只读 proxy
const stateCopy = readonly(state);
console.log(isReactive(stateCopy)); // -> true
</script>
 
 
isReadonly
检查对象是否是由 readonly 创建的只读代理。
 
toRaw
返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”,可用于临时读取数据而无需承担代理访问/跟踪的开销,也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

推荐阅读