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

· 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>

页面显示结果:

显示结果拷贝了一份,看看这4种判断方式的对于各种类型的对象判断结果:

refObj:

isRef(obj) true /isReactive(obj) false /isReadonly(obj) false isProxy(obj) false

reactiveObj:

isRef(obj) false /isReactive(obj) true /isReadonly(obj) false isProxy(obj) true

readonlyObj:

isRef(obj) false /isReactive(obj) false /isReadonly(obj) true isProxy(obj) true

shallowReadonlyObj:

isRef(obj) false /isReactive(obj) false /isReadonly(obj) true isProxy(obj) true

toRefsObj:

isRef(obj) true /isReactive(obj) false /isReadonly(obj) false isProxy(obj) false

shallowReactiveObj:

isRef(obj) false /isReactive(obj) true /isReadonly(obj) false isProxy(obj) true

shallowRefObj:

isRef(obj) true /isReactive(obj) false /isReadonly(obj) false isProxy(obj) false

customRefObj:

isRef(obj) true /isReactive(obj) false /isReadonly(obj) false isProxy(obj) false

toRawObjRef:

isRef(obj) true /isReactive(obj) false /isReadonly(obj) false isProxy(obj) false

markRawObjRef:

isRef(obj) true /isReactive(obj) false /isReadonly(obj) false isProxy(obj) false

toRawObjReactive:

isRef(obj) false /isReactive(obj) false /isReadonly(obj) false isProxy(obj) false

markRawObjReactive:

isRef(obj) false /isReactive(obj) true /isReadonly(obj) false isProxy(obj) true

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

  • 36
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中的数据响应式是通过使用选项API和组合API中的几种函数来实现的。其中,ref()函数用于创建一个基本类型的响应式数据,reactive()函数用于创建一个对象类型的响应式数据,toRef()函数用于创建一个与另一个响应式数据相绑定的引用,toRefs()函数用于将一个响应式对象转换为一组响应式的引用。 具体来说,ref()函数可以将一个普通的JavaScript值转换为一个响应式数据。例如,你可以使用ref()函数将一个数字、字符串或布尔值转换为一个响应式数据,然后在视图中使用该数据,并在数据改变时自动更新视图。 reactive()函数则可以将一个普通的JavaScript对象转换为一个响应式的对象。这意味着当对象中的某个属性发生改变时,Vue会自动通知到使用该属性的代码,使得视图能够及时更新。这种响应式的对象可以包含任意深度的嵌套属性。 toRef()函数可以用来创建一个与另一个响应式数据相绑定的引用。这意味着当原始的响应式数据发生改变时,与之绑定的引用也会随之改变。这在一些特定的场景下非常有用,例如在组件之间共享响应式数据时。 最后,toRefs()函数可以将一个响应式对象转换为一组响应式的引用。这样做的好处是可以方便地在组件的模板中使用这些引用,而无需在每个引用前面加上.value来访问其值。 总结起来,Vue 3中的数据响应式是通过选项API和组合API中的ref()、reactive()、toRef()和toRefs()等函数来实现的。这些函数能够将普通的JavaScript值或对象转换为响应式数据,使得数据的变化能够自动更新视图。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值