vue的[__ob__: Observer]

最新推荐文章于 2025-09-30 17:00:20 发布
转载 最新推荐文章于 2025-09-30 17:00:20 发布 · 1.6w 阅读 · 2
文章标签：

#vue __ob__

本文深入探讨了Vue框架中数据响应式的实现原理，重点讲解了observer模块如何支撑视图与数据的实时同步更新，以及为何常规方法修改data内的数据不会触发响应。了解这背后的机制对于掌握Vue开发至关重要。

1.为什么会获取不到里面的值
 

因为：vue data 里面值都是有这个属性的。这是被vue接管的数据，observer是Vue核心中最重要的一个模块（个人认为），能够实现视图与数据的响应式更新，底层全凭observer的支持。  在初次渲染以后，常规方法对data里面的数据(官方可以相应的操作只有7种，还有set 和直接赋值)进行操作是不会相应的。
 

Vue 源码 模拟Vue2 实现数据劫持Observer 以及数据修改更新视图
lin_fightin的博客
12-06 421
定义一个Observer类，将数据传进去监听 一个个取出来， 给data里面的每个之进行监听 创建一个Wathcer类，用来创建监听者 每个watcher都有一个update方法，方便调用取修改数据。 创建一个Dep类 收集所有依赖者，创建Observer与Watcher的联系。 一开始Complie更新视图的时候，我们就必须相对应的创建一个watcher,接着，通过watcher里面调用data的值，去调用了get函数，这时候我们在get函数里面，通过Dep.target去获取这个watc
数组无法获取到下标的值而是{__ob__: Observer }的解决方式
码农键盘上的梦
12-02 3505
在开发项目中经常要从数据库中拿到数组然后复制给新的数组使用，但是会发现有时候会发现带有: Observer 数组后缀的就是没有办法取到值，更可怕的是 console.log 却能看得到值。
vue中通过方法返回data中的对象是这个{__ob__: Observer}
热门推荐
荆轲刺秦王
12-09 8万+
__ob__: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。 console.log这样的打印函数，被打印的变量会执行自身的toString()，这样，即便内部属性是不可枚举，实际上也能看到。 操作数据的过程中不要删除这些属性： 因为你已经将数据绑定在了vue之中，vue就肯定要为数据添加监控器的，如果你强制删掉了这些监控器，那么这些数据也就失去了监...
(转)数组无法获取到下标的值而是{__ob__: Observer }的解决方式
最新发布
CaseyWei
09-30 293
的，换句人话就是说，你还没有从数据库中取到值放到对应的数组中去你那边就开始取值，那肯定是取不到的，所以我们可以有两种方法，第一种把这个换成同步的形式等你加载完之后再进行取值，或者说采用第二种方式就是设一个延迟等去取完之后呢你在进行赋值即可！那么首先先解释一下为什么数组后面会出现__ob__: Observer ，这个后缀其实是Vue监控变量产生的，如果你是使用 push添加的对象信息就会出现__ob__: Observer。ob: Observer并不是说不能遍历不能枚举那到底为什么还是取不到值呢？
[__ob__: Observer]
黑猫几绛的博客
09-22 2551
场景： 在进行数据请求的时候，需要携带一个数组参数，本以为直接将数组提交上去就万事大吉，但是后端并没有接收到这个数组数据。经过反复排查，当直接输出这个有问题的数组时，显示的是[__ob__: Observer]，点开这个数组后里面却有需要的数据。 分析： __ob__: Observer里面的这些数据是vue对数据设置的监控器,一般都是不可枚举的，这些数据已经绑定在了vue之中，vue需要为数据添加监控器。如果我们强制删掉了这些监控器，那么这些数据也就失去了监控，vu...
Vue项目中请求接口数据，返回的是__ob__: Observer，无法取值问题
qq_48692433的博客
08-15 1241
造成这种原因，是因为__ob__: Observer 是 Vue 对数据监控添加的属性，说明这个数据是异步获取的。
Vue __ob__: Observer
a378113472的博客
05-09 1292
在操作数据的时候发现，ob: Observer这个属性出现之后，如果单独拿数据的值，就会返回undefined。于是就到网上查相关的资料，发现__ob__: Observer是vue一个很重要的知识点。 数据对象的 ob 属性 ob: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。 网上有很多解决的方案： 第一种：ob: Observer 是 Vue 对数据监控添加的属性，如果想去掉可以用赋值的方式。例如Object.assign({},this.owner)。 用这种方式
【坑】Vue中带有__ob__: Observer的数组无法遍历的问题
ioncannontic的博客
08-27 862
【坑】Vue中带有__ob__: Observer的数组无法遍历的问题
将[0 : {__ob__: Observer} 1 : {__ob__: Observer} 2 : {__ob__: Observer}] 处理成一个数组对象
06-01
// [{__ob__: Observer}, {__ob__: Observer}, {__ob__: Observer}] // 使用展开运算符 ... const newArray2 = [...originalArr]; console.log(newArray2); // [{__ob__: Observer}, {__ob__: Observer}, {__ob__:...
__ob__: Observer]0: {__ob__: Observer}1: {__ob__: Observer}2: {__ob__: Observer}3: {__ob__: Observer}length: 4__ob__: Observer {value: Array(4), shallow: false, mock: false, dep: Dep, vmCount: 0}[[Prototype]]: Array '原 转为普通数组
08-22
在 Vue 的响应式系统中，数组通过 `Observer` 类进行处理，其中数组的原型链会被修改为使用一组重写的变异方法（如 `push`、`pop`、`splice` 等），以实现对数组变化的监听和视图更新。响应式数组中通常包含 `__ob__...
vue中如何解决__ob__: Observer
05-26
在 Vue.js 中，__ob__ 是一个用于实现响应式的内部属性。一般情况下，我们不需要直接操作这个属性。但是，在某些情况下，比如将对象作为参数传递给某些第三方库时，可能会遇到 __ob__ 属性的问题。 如果你想要避免 ...
关于数据里的 __ob__: Observer属性
qq_42619485的博客
11-22 2117
vue框架是种双向绑定的数据流，也就是MvvM模式，M就是module也就是代表数据，v是view也就代表视图。 当操作修改了数据时，可以直接反映到视图上。如何某个数据带有__ob__: Observer属性，说明数据已被vue接管监控。无论如何修改数据，返回给视图的都不会发生变化。 如果数据带有这个属性，该数据就不能被枚举。常用的方法是直接深拷贝，相当于在内存中开辟出一个跟原来数据一样的数据。直...
js数组中__ob__: Observer属性
manda Liu的博客
08-17 1万+
需求 从后台拿到的数据为一个对象数组，需要给数组中每个对象元素添加一个字段， 用来判断某个图标是否显示 问题描述 1.通过给数组赋定值方法发现，当数组值为死值时没有问题，当添加字段后有问题，无法更改该字段的值 2.通过复死值发现，添加字段后的数组多了一个__ob__: Observer属性 解决办法 通过JSON.parse(JSON.stringify(this.listDate)) 代码如下： http.post('/xxx/xxx').then(res=>{ console.log(re
成功解决：[‘‘, ‘‘, __ob__: Observer]
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
09-08 2918
在项目中遇到的实际问题。
vue 中 [__ob__: Observer]（被好多人坑了，现在终于解决了）
Sakura1998gis的博客
11-20 3万+
问题分析 看这个问题的朋友先看看情况是不是和我一样，再往下看 我的问题是一个对象数组，push进去对象的话，打印出来看，显示的是 [ob: Observer]，点看能看到里面的数据，但是我遍历他的话一个值也拿不到，拿到的是空值，如果push的普通的数字，字符串啥的就没事。 如果问题一样的话可以继续往下看了。 经过半天的各种分析，网上看博客，然后自己也尝试了在不同位置打console.log和断点查看， 发现在给对象数组中push进去数据的时候，打印出来就是完美的对象数组，可以遍历，但是我要用的时候那个地方打
vue中的：__ob__: Observer【数组和对象的转化】
梦寻汝的博客
09-01 763
建议在mouted 函数里面调用的时间加延时。若果第一种、第二种都不好使的话。
vue中__ob__: Observer属性对象
qq_35478750的博客
09-19 4063
__ob__: Observer是什么？ _ob__: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。 1.vue中为什么[__ob__: Observer]下无法取到数据或者取数据时出现慢一步的情况 _ob__: Observer表示很无辜。一般情况时数据本身的问题，考虑赋值是否时异步了或者慢于监听器。这一点需要注意。 2._ob__: Observer的取用方式 第一种：Object.assign({},this.owner) 第二种：JSON.parse(
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值