VUE3-响应式数据判断

VUE3-响应式数据判断

特性

• isRef: 检查某个值是否为ref
• isReactive: 检查一个对象是否为reactive()、shallowReactive()创建的代理
• isProxy：检查一个对象是否为reactive()、shallowReactive()、readonly()、shallowReadonly()
  创建的代理
• isReadonly：检查传入的值是否为只读对象

可以看出，当时用readonly和shallowReadonly后只读对象是Proxy

代码

<template>

</template>

<script>
  import {
      
      
    ref,
    isRef,
    reactive,
    isReactive,
    isReadonly,
    isProxy,
    readonly
  } from 'vue';
  export default {
      
      
    setup() {
      
      
      // 判断某个数据是否是ref的
      let counter = ref(1)
      console.log(isRef(counter));
      // 判断某个对象是否通过 reactive()、shallowReactive()获取的代理
      let data = reactive({
      
      
        counter: 1
      })
      let data1 = ref(1)
      console.log(isReactive(data));
      // 判断某个对象是否为代理对象
      console.log(isProxy(data));
      data = readonly(data)
      // 判断某个对象是否为只读对象
      console.log(isReadonly(data));
      // 只读的采用isProxy判断的话，是只读的isProxy的结果也是true
      console.log(isProxy(data));
      data1.value = readonly(data1)
      console.log(data1.value, isProxy(data1.value));
    }
  }
</script>

涉及内容

vue3、Proxy、ref、isRef、isReactive、isReadonly、isProxy