响应式数据的判断

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

我们在setup中定义的数据越来越多, 且很多数据经过函数的处理！就容易分不清了！

数据到底是什么类型的！或者说这个数据经没经过 readonly 函数的修饰、等等这些。

还有就是别的组件传递给过来的数据, 我们需要判读一下, 传递的数据到底是 ref类型的；还是 reactive 所定义的响应式数据, 传递的数据有没有经过 readonly 的修饰呢！都需要判断一下！

就可以通过这4个api判断一下: isRef、isReactive、isReactive、isProxy。

<script>
import { ref, toRefs, reactive, readonly, isRef, isReactive, isReadonly, isProxy } from "vue";export default {name: "App",setup() {let car = reactive({ name: '奔驰', price: '40w'})let sum = ref(0)let car2 = readonly(car)console.log(isRef(sum));       // trueconsole.log(isReactive(car));  // trueconsole.log(isReadonly(car2)); // trueconsole.log(isProxy(car));     // true// readonly 处理了响应式数据 car, 但是并没有把数据变为一个 object类型的数据; 数据依然是一个代理类型的数据console.log(isProxy(car2));    // trueconsole.log(isProxy(sum))      // falsereturn { ...toRefs(car) };},
};
</script>

Day 15-其它 Composition API_ 响应式数据的判断相关推荐

Vue响应式数据: Observer模块实现
前言首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励.接下来的日子我应该会着力写一系列关于Vue与React内部原理的文 ...
vue源码之响应式数据
分析vue是如何实现数据响应的. 前记现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
Vue响应式数据: Observer模块实现 1
前言首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励.接下来的日子我应该会着力写一系列关于Vue与React内部原理 ...
VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
reactive函数实现响应式数据
使用reactive函数可以定义对象类型.数组类型的响应式数据. 看个具体的例子. 入口文件main.js import { createApp } from 'vue'; import App fr ...
从数组的响应式看下一代响应式数据
随着MVVM框架的广泛使用响应式数据已经变得耳熟能详,现在谈响应式数据好像有点炒冷饭的意思,对!没错!不过这次炒的是蛋炒饭,而且还是加火腿肠的那种.之前看过几个框架的响应式数据实现,貌似都对数组(Ar ...
【vue3 Api - watchEffect 的讲解使用】- 侦听响应式数据执行副作用(effect)函数
在了解 `watchEffect` api之前,需要了解在vue中,副作用函数的定义是什么: 字面意义的讲,副作用函数指的是会产生副作用的函数,例如下面该函数: var num = 10 functi ...
html5响应式前端设计,15个最新的响应式设计前端框架
你会发现,随着响应式Web设计的不断成熟,各类框架也变得越发健壮和可靠.也许是受到了Bootstrap.Foundation和Gumby的影响,如今很多新的框架都开始向一体化多功能的模式进化,它们提供 ...
vue3之实现响应式数据ref和reactive
用途 ref.reactive都是vue3提供实现响应式数据的方法 ref() 接受一个内部值,返回一个响应式的.可更改的ref对象,此对象只有一个指向其内部的属性.value ref可以说是简化版的 ...

Day 15-其它 Composition API_ 响应式数据的判断

响应式数据的判断

Day 15-其它 Composition API_ 响应式数据的判断相关推荐

最新文章

热门文章