vue3如何判断是不是响应式数据

本文介绍: · isRef: 检查一个值是否为一个 ref 对象· isReactive: 检查一个对象是否是由 reactive 创建的响应式代理· isReadonly: 检查一个对象是否是由 readonly 创建的只读代理· isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

· isRef: 检查一个值是否为一个 ref 对象

· isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

· isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

· isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

<template>
  <div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  customRef,
  readonly,
  shallowReadonly,
  shallowReactive,
  shallowRef,
  toRefs,
  toRaw,
  markRaw,
  isRef,
  isReactive,
  isReadonly,
  isProxy,
} from 'vue'
// vue3.0 版本语法
export default defineComponent({
  setup () {
    /*
    响应式数据的判断
    isRef: 检查一个值是否为一个 ref 对象
    isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
    isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
    isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
    */
    const refObj = ref('')
    logFun(refObj,'refObj')
    const reactiveObj = reactive({})
    logFun(reactiveObj,'reactiveObj')
    const readonlyObj = readonly({})
    logFun(readonlyObj,'readonlyObj')
    const shallowReadonlyObj = shallowReadonly({})
    logFun(shallowReadonlyObj,'shallowReadonlyObj')
    const toRefsObj1 = reactive({
      toRefsObj: {}
    })
    const { toRefsObj } =  toRefs(toRefsObj1)
    logFun(toRefsObj,'toRefsObj')
    const shallowReactiveObj =  shallowReactive({})
    logFun(shallowReactiveObj,'shallowReactiveObj')
    const shallowRefObj =  shallowRef({})
    logFun(shallowRefObj,'shallowRefObj')
    // customRef自定义一个Ref
    function myCustomRef(value) {
      return customRef((track, trigger) => {
        return {
          get() {
            track() // 追踪后续数据的变化
            return value
          },
          set(newValue) {
            value = newValue
            trigger() // 重新解析模板
          }
        }
      })
    }
    let customRefObj = myCustomRef('hello')
    logFun(customRefObj,'customRefObj')
    const toRawObjRef = toRaw(refObj)
    logFun(toRawObjRef,'toRawObjRef')
    const markRawObjRef = markRaw(refObj)
    logFun(markRawObjRef,'markRawObjRef')

    const toRawObjReactive = toRaw(reactiveObj)
    logFun(toRawObjReactive,'toRawObjReactive')
    const markRawObjReactive = markRaw(reactiveObj)
    logFun(markRawObjReactive,'markRawObjReactive')
    // 统一调用判断函数
    function logFun (obj,type) {
      console.log(type+':','isRef(obj)',isRef(obj),'/isReactive(obj)',isReactive(obj),'/isReadonly(obj)',isReadonly(obj),'isProxy(obj)',isProxy(obj));
    }
    
    return {
      //
    }
  },
})
</script>