[ob: Observer]与proxy

于 2023-03-08 22:23:47 发布
阅读量158 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakura1998gis/article/details/129413022
版权

在vue2中操作数组，不论是foreach还是push等操作，然后打印结果总是会出现[ob: Observer]包裹着我们想要的数据，而在vue3中是出现proxy对象包裹着我们想要的数据，打印能看到，但是代码里面取不到里面的值。

顺便记录一下小坑
forEach里面的ruturn只是跳出循环，并不返回任何值，返回的是undefined，如果要想return出来值的话，需要在外面定义一个变量，在foreach里面把值赋给新定义的变量，然后在foreach的外部return值。这样才可以

话说回去，至于为什么会产生上面的[ob: Observer] 与proxy，仍不清楚，只是发现了什么情况下会出现这种情况，解决办法有两个，一个是不停的监听，拿最新值，还有一个就是用JSON.parse和JSON.stringify包一层再拿值。

有玉微凉，是为樱琅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带你彻底搞懂Vue3的Proxy响应式原理，TypeScript从零实现基于Proxy的响应式库。
qq_64513388的博客
01-10 2583
前言 最近在浏览React状态管理库的时候，发现了一些响应式的状态管理库如 hodux,react-easy-state，内部有一个基于proxy实现响应式的基础仓库observer-util，它的代码实现和Vue3中的响应式原理非常相似，这篇文章就从这个仓库入手，一步一步带你剖析响应式的实现。 本篇是系列第一篇，主要讲解了普通对象的响应式源码 本文的代码是我参考observer-util用ts的重写的，并且会加上非常详细的注释。 阅读本文可能需要的一些前置知识： ProxyWeakMapRefl
vue:__ob__: Observer导致Array.filter错误：this.comments.filter is not a function
kfgauss的博客
06-15 8017
折腾了好久 本来视频里面传参用的是对象,进来后取出里面的数组，自己先把对象里面的数组传进来了 明明是数组传进来的，也可以顺利作为数组vfor渲染。 为什么使用this.comments.filter(v=>v.openid===this.userinfo.openId).length）会报错？this.comments.filter is not a function 然后了解了_...
es6 实例：使用Proxy实现观察者模式
歪脖先生的博客
01-27 810
实例：使用Proxy实现观察者模式 观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。 const person = observable({ name: '张三', age: 20});function print() { console.log(`${person.name}, ${person.age}`)}observe(p
vue中[__ob__: Observer]的数组无法遍历
濮家大少
09-09 8183
今天开发遇到这样一个问题，记录一下踩坑记录   我请求回来的是一个数组，我要通过遍历这个数组将符合要求的数据重新push到一个新的空数组中，然后再遍历这个新数组进行操作，但是过程中发现新数组使用forEach遍历时没有进入循环，打印新数组后如下所示：   其实不是数组无法遍历，是我在请求方法外面直接调用了遍历新数组的方法，由于请求是异步的，还没接收到后台返回的数据，也就还没有添加到数组里，遍历时自然没有内容。   数组为空，但是点开又有数据是因为开始空数组没赋值，赋值之后，因为是地址引用，那个数组已经被修
vue中__ob__: Observer属性对象
qq_35478750的博客
09-19 3830
__ob__: Observer是什么？ _ob__: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。 1.vue中为什么[__ob__: Observer]下无法取到数据或者取数据时出现慢一步的情况 _ob__: Observer表示很无辜。一般情况时数据本身的问题，考虑赋值是否时异步了或者慢于监听器。这一点需要注意。 2._ob__: Observer的取用方式 第一种：Object.assign({},this.owner) 第二种：JSON.parse(
vue3.0后的学习proxy笔记(觉得和reflect一起对比学习效果更佳)
Bruce__taotao的博客
12-08 1372
      最近看相关报道，vue3.0 开发计划 传送门 https://juejin.im/post/5bb719b9f265da0ab915dbdd 其中，监测机制： 一句话介绍：更加全面、精准、高效；更具可调试性的响应跟踪；以及可用来创建响应式对象的 API。 3.0 将带来一个基于 Proxy 的 observer 实现，它可以提供覆盖语言 (JavaScript——译注) 全...
vue 数据劫持 响应式原理 Observer Dep Watcher
weixin_33858485的博客
11-20 190
1、vue响应式原理流程图概览   2、具体流程 （1）vue示例初始化(源码位于instance/index.js） import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { eventsMix...
Vue 响应式核心 observer 源码详解 + 实践
weixin_33994429的博客
07-20 287
笔者日前学习了 Vue 的 Observer 部分，简单地谷歌了一下，因为没有找到解释地十分彻底的中文资源，记下自己对其的理解并分享。 转载需注明出处 https://segmentfault.com/a/11... ，有帮助请点赞。 本文引用的 Vue 版本为 v2.5.17-beta.0 。不过 Vue 的 Observer 部分自2...
Vue 源码解析（一）：依赖收集（Observer，Dep与Watcher对象）
Czuaphe的博客
05-25 1417
Vue 实例新建流程 Vue源码目录结构说明 src compiler 解析模板生成AST和render函数 core components 目前只有keep-alive组件 global-api 向Vue对象注入全局方法：Vue.use()，Vue.extend()等 instance 向Vue实例对象注入方法：this.$emit(),this.$forceUpdate()等 observer 实现data与Watch对象的依赖收集与更新 util 工具类 vdom Vdom有关方法 entr
设计模式:Observer（观察器）
03-03
本页内容上下文问题影响因素解决方案示例结果上下文相关模式上下文在...例如，Model-View-Controller模式规定将业务数据（模型）与显示逻辑（视图）分离。当模型发生改变时，系统必须通知视图以便它可以刷新可视显示，
简单实现Vue的observer和watcher
11-28
这个过程涉及到两个关键组件：`observer` 和 `watcher`。 `observer` 是 Vue 内部用来深度遍历并监视数据对象的工具。它通过调用 `Object.defineProperty` 在每个属性上设置 getter 和 setter。当读取属性值时，...
simple-observer：具有ES6代理的简单观察者
02-18
$ npm install simple-observer 用法 const { observable , observe , unobserve , isObservable } = require ( 'simple-observer' ) ; // Can't observe for Set/Map/WeakSet/WeakMap value. const ASYMBOL = ...
resize-observer-polyfill:用于Resize Observer API的polyfill
05-08
ResizeObserver Polyfill 用于Resize Observer API的polyfill。 实现是基于MutationObserver的，并且如果不支持第一个事件，则将Mutation Events作为回退，因此除非DOM更改，否则不会进行轮询。 不修改观察到的元素...
vue 中 [__ob__: Observer]（被好多人坑了，现在终于解决了）
热门推荐
Sakura1998gis的博客
11-20 3万+
问题分析 看这个问题的朋友先看看情况是不是和我一样，再往下看 我的问题是一个对象数组，push进去对象的话，打印出来看，显示的是 [ob: Observer]，点看能看到里面的数据，但是我遍历他的话一个值也拿不到，拿到的是空值，如果push的普通的数字，字符串啥的就没事。 如果问题一样的话可以继续往下看了。 经过半天的各种分析，网上看博客，然后自己也尝试了在不同位置打console.log和断点查看， 发现在给对象数组中push进去数据的时候，打印出来就是完美的对象数组，可以遍历，但是我要用的时候那个地方打
Vue中引用assets中的图片的几种方式
Sakura1998gis的博客
12-08 1万+
作为img标签引进来 <img class="img" alt="example" :src="require('./../assets/image/applicationOne.png')"> 作为背景图片引入 <span :style="'background-image:url('+require('./../assets/image/gotoSystemTwo.png')+')'" ></span> ...
vue3中vite的@路径别名与path中的resolve
Sakura1998gis的博客
10-12 8556
vite配置@路径别名 node.js中path的resolve方法解析
Vue中的import from
Sakura1998gis的博客
12-28 5915
Vue中的import from 大家都知道，import from 是用来引入一些文件的，在vue中，可能有.js文件.json文件.vue文件 在JS和JSON文件引入的时候，往往需要写入一些 //例如数组 export const a=[] //例如对象 export const b={} //例如函数 export function c(){} 在其他文件中需要引入的时候，就写上，只引入一个的时候可写可不写大括号 import {a,b,c} from '你的路径' 路径可以是相对路径也可以是绝
VUE监听一个值的变化随之做出别的改变
Sakura1998gis的博客
11-26 3681
我这里面要监听showbartable的值的变化，他的true和flase两种状态会决定我另一个东西的变化，为了监听他的属性变化，先在computed里面写一个函数，如图中红框，返回那个值 在watch里面接住上面这个函数，newval和oldval是监听他的时候前后变化，监听到之后，把这个新值当做一个参数传出去，传到一个函数里面 在methods里面写传出数据的那个函数，参数i就是那个新值，...
Vue 数组中出现[ob: Observer]无法取值遍历
最新发布
04-06
在 Vue 中，当一个数据属性被观察时，它会被转换成一个 Observer 对象。这个 Observer 对象会将数组转换成一个拥有特殊行为的数组，以便能够检测到数组的变化。这个 Observer 对象会被添加到数组中，所以当你遍历数组时，你会看到这个 [ob: Observer]。 如果你想要遍历一个被观察的数组，你需要使用 Vue 提供的一些数组方法，如 push、pop、shift、unshift、splice、sort、reverse。这些方法会触发数组的变化，从而让 Observer 对象能够检测到数组的变化并更新视图。 例如，你可以使用 Vue 的 v-for 指令来遍历一个数组： ``` <template> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </template> <script> export default { data() { return { list: ['apple', 'banana', 'cherry'] }; } }; </script> ``` 在这个例子中，我们使用 v-for 指令来遍历 list 数组，并将每个元素渲染成一个 li 标签。由于我们使用了 Vue 提供的数组方法来修改 list 数组，所以 Observer 对象能够检测到数组的变化并更新视图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值