Vue3 学习笔记 —— 响应式数据的判断

最新推荐文章于 2024-12-08 16:21:41 发布

原创最新推荐文章于 2024-12-08 16:21:41 发布 · 621 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue3 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue中的ref、reactive和readonly三种响应式工具的使用，并通过示例展示了如何使用isRef、isReactive、isReadonly和isProxy进行检测。在setup函数中，创建了ref、reactive和readonly对象并打印了它们的检测结果，演示了如何判断一个对象是否为响应式或代理对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

isRef

判断一个值是否为一个 ref 对象

isReactive

判断一个对象是否是由 reactive创建的响应式代理

isReadonly

判断一个对象是否是由 readonly 创建的只读代理

isProxy

判断一个对象是否是由 reactive 或 readonly 创建的代理

测试

代码：

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

<script lang="ts">

import { defineComponent, ref, reactive, readonly, isRef, isReactive, isReadonly, isProxy} from 'vue';


export default defineComponent({
  name: 'Child',

  setup() {
    let testRef = ref('ref')
    console.log('isRef:', isRef(testRef))

    let testReactive = reactive({})
    console.log('isReative: ', isReactive(testReactive))

    let testReadOnly = readonly({name: '12'})
    console.log('isReadonly: ', isReadonly(testReadOnly))

    console.log('isProxy: ', isProxy(testRef))
    console.log('isProxy: ', isProxy(testReactive))
    console.log('isProxy: ', isProxy(testReadOnly))

  }

});
</script>