Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Vue -如何识别[__ob__:观察者]?

Vue -如何识别[__ob__:观察者]?
EN

Stack Overflow用户
提问于 2019-05-21 14:44:29
回答 4查看 5K关注 0票数 4

在我的组件中,我循环遍历一个data属性,它是一个对象,以检查是否设置了任何值。其中一个值是一个数组,但是当它为空时,我通过控制台记录它的值,它会返回

[__ob__: Observer]

如果我测试它是一个数组还是一个对象,它不会对它们中的任何一个返回true。只有在添加了元素后,它才会被识别为数组。

我还试着测试它是否是一个函数(entry[1] === "function") --不是真的。

那么什么是[__ob__: Observer],我如何进行检查才能识别这个特定的东西呢?我需要为它破例。

EN

回答 4

Stack Overflow用户

发布于 2019-05-21 15:06:11

VueJS具有“反应性”,这意味着它们会为你观察对象。因此,在您的基本数据选项中,Vue将为您监视属性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
new Vue({
  data() {
    return {
      myArray: []
    }
  }
})

在这种情况下,myArray将是一个可观察的对象,这只是一个包装器,您仍然可以使用所有标准的数组操作。

这意味着你仍然可以这样做:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if (this.myArray && this.myArray.length > 0) {
 Do something with they array
}

有关VueJS如何处理数据选项的更多信息。https://vuejs.org/v2/guide/reactivity.html

票数 2
EN

Stack Overflow用户

发布于 2019-11-09 05:56:24

如果你的目标是调试Observer Vue实例中包含的东西,这是我的解决方案:

打印出template块中变量属于您的组件

在此之后,您可以重新格式化输出的结构以观察细节。

例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div>
    {{ your_variable }}
  <div>
</template>

希望这能对你有所帮助。

票数 1
EN

Stack Overflow用户

发布于 2019-05-21 14:59:47

如果您的目标是检查数组是否为空,为什么不直接检查arrayVariable.length === 0[__ob__: Observer]是一个具有Vue注入反应性的对象。你可以检查typeof arrayVariable,你应该得到object

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56240840

复制
相关文章
【前端词典】Vue 响应式原理其实很好懂
这是十篇 Vue 系列文章的第三篇,这篇文章我们讲讲 Vue 最核心的功能之一:响应式原理。
小生方勤
2019/06/13
8300
Vue2.0 之 vue Cannot read property '__ob__' of undefined 异常(back报错)
虽然在这个页面子组件页面不报任何异常,但是我back返回上一个页面的时候,就会报vue Cannot read property '__ob__' of undefined异常,一直以为是上一页面的子组件的问题造成,反复查找,后来经过跟踪才发现,是因为我在本页面循环了子组件的原因,频繁创建,一直没有销毁,所以才会造成返回上一个页面的时候才会报错,趁着时间赶快记录下这一问题!
White feathe
2021/12/08
6290
Vue2.0 之 vue Cannot read property '__ob__' of undefined 异常(back报错)
Vue中如何使用方法、计算属性或观察者
熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子。
六小登登
2018/11/15
1.3K0
vue人脸识别_vue信息识别系统
vue报错:无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
全栈程序员站长
2022/09/23
2.6K0
vue人脸识别_vue信息识别系统
Vue源码阅读 - 依赖收集原理
vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在下借这个机会从大家的文章和讨论中汲取了一些营养,同时对一些阅读源码时的想法进行总结,出产一些文章,作为自己思考的总结,本人水平有限,欢迎留言讨论~
前端下午茶
2018/10/22
1.2K0
Vue源码阅读 - 依赖收集原理
Vue数据双向绑定原理
Vue是通过数据劫持的方式来实现数据双向数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,该方法允许精确地添加或修改对象的属性,对数据添加属性描述符中的getter与setter实现劫持。
WindRunnerMax
2020/08/27
1.3K0
2. 「vue@2.6.11 源码分析」数据驱动视图(响应式)
vue 最核心的卖点是数据驱动和组件。浏览器原生提供的交互是通过dom api来修改dom元素,由于浏览器兼容性问题后面的框架如jquery对原生的api进行了一层的封装以屏蔽浏览器的差异性,但并未作出实质的改变。想想这个过程,通常是数据发生变化,js根据变化的情况进行判断而后操作dom。dom变动的本质实际根本上实际是由数据驱动,我在第一家公司数字政通(egova)首次接触了的此类框架knockout。
tinyant
2023/02/24
5380
2. 「vue@2.6.11 源码分析」数据驱动视图(响应式)
Vue响应式依赖收集原理分析
在 Vue 的初始化阶段,_init 方法执行的时候,会执行 initState(vm) ,它的定义在 src/core/instance/state.js 中。在初始化 data 和 props option 时我们注意 initProps 和 initData 方法中都调用了 observe 方法。通过 observe (value),就可以将数据变成响应式。
yyds2026
2022/12/12
7620
Vue.js源码逐行代码注解src下core下observer
达达前端
2023/10/08
2170
从vue源码中学习观察者模式
观察者模式(Observer):通常又被称作为发布-订阅者模式。它定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖于它的对象都会得到通知并自动更新,解决了主体对象与观察者之间功能的耦合。
yyzzabc123
2022/10/04
6310
Vue响应式依赖收集原理分析-vue高级必备
在 Vue 的初始化阶段,_init 方法执行的时候,会执行 initState(vm) ,它的定义在 src/core/instance/state.js 中。在初始化 data 和 props option 时我们注意 initProps 和 initData 方法中都调用了 observe 方法。通过 observe (value),就可以将数据变成响应式。
yyds2026
2022/10/26
5770
vue 人脸识别 demo
看到很多网上 vue 实现人脸识别的 demo ,很多都是不成形的源码。没办法,工作需要,自己借鉴别人的写了一个demo。( 可以满足所有的需求 )
小蔚
2020/08/31
2.5K0
【前端进阶基础】VUE响应式数据原理 订阅-发布模式解析
关于虚拟DOM的核心算法,我们上一章已经基本解析过了,详细的见 React && VUE Virtual Dom的Diff算法统一之路 snabbdom.js解读
super.x
2019/04/12
6920
【前端进阶基础】VUE响应式数据原理 订阅-发布模式解析
Vue生命周期
Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程,这个过程就是Vue的生命周期,在Vue的整个生命周期中提供很多钩子函数在生命周期的不同时刻调用,Vue中提供的钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
WindRunnerMax
2020/08/27
5270
上帝视角看Vue源码整体架构+相关源码问答
这段时间利用课余时间夹杂了很多很多事把 Vue2 源码学习了一遍,但很多都是跟着视频大概过了一遍,也都画了自己的思维导图。但还是对详情的感念模糊不清,故这段时间对源码进行了总结梳理。
yyzzabc123
2022/10/03
1.8K0
vue源码分析之defineReactive方法中为什么有两种dep在收集依赖?
了解vue响应式原理对童鞋,想必对defineReactive方法有印象,这是vue响应式的核心方法。在这个方法,给obj的每个key对应的都new了一个dep,这个dep保存在defineReactive闭包中。这个dep的作用非常明显,收集当前watcher,以便在触发obj属性set方法的时候通知watcher更新。
玖柒的小窝
2021/10/05
1.8K1
前端vue面试题,附答案
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉
zz1998
2021/07/07
8140
Vue父子组件生命周期
Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed,父子组件嵌套时,父组件和子组件各拥有各自独立的钩子函数。
WindRunnerMax
2020/09/22
7950
vue 响应式原理
简单点讲 vue 的响应式是通过 Object.defineProperty 和 观察者模式来实现的。 vue 初始化的时候 watcher 构造函数通过 Object.defineProperty 方法对 data 属性进行递归遍历,设置 get、set,初始化编译的时候会触发 getter 函数,进行依赖收集,将观察者 watcher 添加到目标对象 dep 中。改变数据的时候会触发 set, 执行 notify 方法,调用 dep 中 watcher 对象的 update 方法,update 方法将 watcher 添加到 watcher 队列中, 通过调用 nextTick 异步执行,触发更新。
大当家
2020/04/01
5790
vue面试被问到Composition-API响应式包装对象原理
打开源码可以找到reactive的入口,在composition-api/src/reactivity/reactive.ts,我们先从函数入口开始分析reactive发生了什么事情,通过之前的学习我们知道,reactive用于创建响应式对象,需要传递一个普通对象作为参数。
bb_xiaxia1998
2022/12/07
6500

相似问题

Vue返回[__ob__:观察者]

30

如何在vuejs中获得值[__ob__:观察者]

11

如何访问[__ob__:观察者]在VueJS中的元素?

64

我想要简单的数组而不是[__ob__:观察者]

22

在异步中返回数组时,Nuxt返回'__ob__:观察者‘

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文