vue数据类型[__ob__: Observer]格式的转换以及使用判断

最新推荐文章于 2024-07-04 16:24:20 发布
置顶 最新推荐文章于 2024-07-04 16:24:20 发布
阅读量1.3w 收藏 18
点赞数 8
分类专栏： 知识累积 文章标签： js 数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/agua001/article/details/111352755
版权

[ob: Observer]： 可视察数组，不能通过tableData === []这样判断是否为空，需要使用数组的长度判断才有效：tableData.length > 0

[ob: Observer]转成正常数组：
1、Object.assign({},this.tableData)
2、JSON.parse(JSON.stringify(this.tableData)

如果是这种数组类型[]，可以直接操作：tableData === []或者tableData.length > 0

心若向阳(*￣︶￣)
关注
专栏目录
{__ob__: observer}取值报错问题
qq_41836598的博客
10-17 3540
{ob: observer}取值报错问题 解决方案:JSON.parse(JSON.stringify( ob )) 在直接对{ob: observer}访问属性时会报错，网上看到的大多数人是报undefined错误，我遇到的问题是获取成功，但是控制台报错not defined 将数据打印出来看看 发现res.user并不是一个对象数组，而是{ob: observer}格式 百度看看{o...
vue判断数据是对象_Vue源码解析五——数据响应系统
weixin_42508313的博客
12-30 1847
接下来重点来看Vue的数据响应系统。我看很多文章在讲数据响应的时候先用一个简单的例子介绍了数据双向绑定的思路，然后再看源码。这里也借鉴了这种方式，感觉这样的确更有利于理解。数据双向绑定的思路1. 对象先来看元素是对象的情况。假设我们有一个对象和一个监测方法：const data = {a: 1};/*** exp[String, Function]: 被观测的字段* fn[Function]: 被...
vue中的：__ob__: Observer【数组和对象的转化】
weixin_46331416的博客
03-03 1万+
vue：ob: Observer【数组和对象的转化】 问题：vue中的data数据的this.data在mothods中遍历,却无法取值 但是可以打印出来： 数组里边有个__ob__: Observer 数组里边每个对象有个__ob__: Observer 分析 _ob_: Observer是 Vue 对数据监控添加的属性，不可枚举和遍历 解决（转化之后即可取值） 将数组转为普通数组，再将数组里边的对象转为普通对象，如下： let newarr = Object.as
vue中数组出现__ob__: Observer属性，导致不能正确使用问题解决
最新发布
wch19960518的博客
07-04 614
深拷贝数组，重新生成一个可枚举数组。直接上图，如下图，数组中出现。属性，导致无法取值。
vue中将数据格式为_ob_:Observe的数据转换为数组格式的方法
m0_68671019的博客
06-21 619
（本篇文章为自己复习时使用哦！（uniapp中也一样！
vue中observer数组转化为普通数组
zhtxilyj的博客
03-15 1492
vue从后台请求下来的数组提示—ob—observer 不能直接使用，需要转化为普通数组。方法：JSON.parse(JSON.stringify(list))
[__ob__: Observer]
黑猫几绛的博客
09-22 2413
场景： 在进行数据请求的时候，需要携带一个数组参数，本以为直接将数组提交上去就万事大吉，但是后端并没有接收到这个数组数据。经过反复排查，当直接输出这个有问题的数组时，显示的是[__ob__: Observer]，点开这个数组后里面却有需要的数据。 分析： __ob__: Observer里面的这些数据是vue对数据设置的监控器,一般都是不可枚举的，这些数据已经绑定在了vue之中，vue需要为数据添加监控器。如果我们强制删掉了这些监控器，那么这些数据也就失去了监控，vu...
简单实现Vue的observer和watcher
11-28
这通过在 `defineReactive` 中添加条件判断来实现，如果值是一个对象，`Observer` 就会递归调用自身，确保所有子对象的属性也被转换为响应式的。这个递归过程可以处理任何层级的数据结构，但通常情况下，对象的深度...
vue 如何生成一个dom元素_vue：虚拟dom的实现
weixin_34245171的博客
01-16 7896
Vitual DOM是一种虚拟dom技术，本质上是基于javascript实现的，相对于dom对象，javascript对象更简单，处理速度更快，dom树的结构，属性信息都可以很容易的用javascript对象来表示：let element={tagName:'ul',//节点标签名props:{//dom的属性，用一个对象存储键值对id:'list'},children:[//该节点的子节点{t...
vue源码解析---data，Observer，Dep，Watcher之间的关系
weixin_42011096的博客
05-29 655
一、data，Observer，Dep，Watcher之间的关系 上图截自《深入浅出vue.js》。 通过Observer类提供的方法，将data转化为具有getter以及setter的数据。并在getter中收集依赖装在Dep中，
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
10-15
在Vue2中，数据变化侦测通过`Observer`类实现，它遍历对象的所有属性并使用`defineReactive`将其转换为响应式的。对于数组，Vue2还实现了特殊的变异方法，如`push`、`pop`等，确保它们也能触发视图更新。 **Vue3中...
Vue 数组中出现__ob__: Observer无法取值[已解决]
聪明不喝牛奶的博客
10-31 2万+
问题说明 在开发项目中经常要从数据库中拿到数组然后复制给新的数组使用，但是会发现有时候会发现带有 __ob__: Observer 数组后缀的就是没有办法取到值，更可怕的是 console.log 却能看得到值。数组如下图所示： 解决问题 那么针对这样的问题博客上基本上都是说要将数组转化成string对象运用这个JSON.parse(JSON.stringify(数组))再进行赋值，然后一顿操作数组变成空！！！ 说实话根本不是这个原因，哎被坑了一下午！ 那么首先先解释一下为什么数组后面会出现__ob__:
ChatGPT：vue 中 [__ob__: Observer]的理解
weixin_59930636的博客
06-13 1684
在Vue.js中，是Vue内部使用的特殊属性，用于实现响应式系统。它是Observer（观察者）的实例，并且在Vue组件的响应式数据对象上被添加。Vue的响应式系统是通过劫持对象的访问器属性来实现的。当你将一个普通的JavaScript对象传递给Vue实例的data选项时，Vue会遍历对象的所有属性，并使用方法将它们转换为 getter 和 setter。这样，当对象的属性发生变化时，Vue就能够捕获到这些变化并通知相关的视图进行更新。
Vue 数组中出现[__ob__: Observer]无法取值遍历
陈新科的博客
01-04 7502
问题说明 在开发项目中经常要从数据库中拿到数组然后复制给新的数组使用，但是会发现有时候会发现带有 __ob__: Observer 数组后缀的就是没有办法取到值，更可怕的是 console.log 却能看得到值。数组如下图所示： 解决问题 那么首先先解释一下为什么数组后面会出现__ob__: Observer ，这个后缀其实是Vue监控变量产生的，如果你是使用 push添加的对象信息就会出现__ob__: Observer 。 __ob__: Observer并不是说不能遍历不能枚举，那到底为什么
vue中通过方法返回data中的对象是这个{__ob__: Observer}
热门推荐
荆轲刺秦王
12-09 8万+
__ob__: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。 console.log这样的打印函数，被打印的变量会执行自身的toString()，这样，即便内部属性是不可枚举，实际上也能看到。 操作数据的过程中不要删除这些属性： 因为你已经将数据绑定在了vue之中，vue就肯定要为数据添加监控器的，如果你强制删掉了这些监控器，那么这些数据也就失去了监...
vue的{__ob__: observer}取值问题---亲测可解决部分场景！！！
qq_30255701的博客
11-25 4446
不说场景就提解决方案就是耍流氓！ 1、往下看之前先看下{__ob__: observer}中的数据是否为null，如果未空确认下该属性赋值与取值是否为异步(ajax从后端获取数据)，判断方法很简单，在赋值和取值的地方各打印下就知道了。 首先说下我遇到的场景：我想在main.js中获取vuex store中存储的数据，首先打印store.state.permission发现可以获取到store中的数据，立马兴高采烈的使用store.state.permission.btnPermission。 结果如下图，
vue 中 [__ob__: Observer]（被好多人坑了，现在终于解决了）
Sakura1998gis的博客
11-20 3万+
问题分析 看这个问题的朋友先看看情况是不是和我一样，再往下看 我的问题是一个对象数组，push进去对象的话，打印出来看，显示的是 [ob: Observer]，点看能看到里面的数据，但是我遍历他的话一个值也拿不到，拿到的是空值，如果push的普通的数字，字符串啥的就没事。 如果问题一样的话可以继续往下看了。 经过半天的各种分析，网上看博客，然后自己也尝试了在不同位置打console.log和断点查看， 发现在给对象数组中push进去数据的时候，打印出来就是完美的对象数组，可以遍历，但是我要用的时候那个地方打
Vue __ob__: Observer
笑*容的博客
04-09 8568
在操作数据的时候发现，__ob__: Observer这个属性出现之后，如果单独拿数据的值，就会返回undefined。于是就到网上查相关的资料，发现__ob__: Observer是vue一个很重要的知识点。 数据对象的 __ob__ 属性 __ob__: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。 网上有很多解决的方案： 第一种：__ob__: Observer 是 Vue 对数据监控添加的属性，如果想去掉可以用赋值的方式。例如Object.assign({
{__ob__: Observer}转换成数组
06-07
这个对象似乎是Vue.js中的观察者对象，它并没有任何可遍历的属性或方法，因此不能直接将其转换为数组。如果你需要将其转换为数组，可以手动提取其中的信息并放入一个数组中。 例如，如果你想提取该对象的所有键名，可以使用Object.keys()方法提取其中的键名，例如： ```javascript const obj = {__ob__: Observer}; const arr = Object.keys(obj); console.log(arr); // ["__ob__"] ``` 如果你想提取该对象的键值，可以使用obj['__ob__']方式访问其中的属性，例如： ```javascript const obj = {__ob__: Observer}; const value = obj['__ob__']; const arr = [value]; console.log(arr); // [Observer] ``` 需要注意的是，这里的Observer并不是一个简单的值，而是一个对象或类实例，需要根据具体情况进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值