关于Vue "ob:Observer"属性的解决方案详析

更新时间：2022年11月12日 15:11:39 作者：一个水瓶座程序猿.

在操作数据的时候发现,__ob__: Observer这个属性出现之后,如果单独拿数据的值,就会返回undefined,下面这篇文章主要给大家介绍了关于Vue "__ob__:Observer"属性的解决方案,需要的朋友可以参考下

问题描述

我们操作 Vue 数据的时候，经常会看到这个属性: __ob__:Observer
在我们操作这个数据的时候，如果想要单独拿这个数据里面的值，就会返回 undefined
经过我在网上查找相关资料，发现 __ob__:Observer 是 Vue 中一个非常重要的知识点

原因分析：

那么什么是数据对象的 __ob__ 属性呢？

其实 __ob__:Observer 这些数据，是 Vue 框架对数据设置的监控器，一般是 不可以被枚举 的

解决方案：

下面是我在网上查资料找的几点解决方案，希望可以帮到大家：

第一种： __ob__: Observer 是 Vue 对数据监控添加的属性，如果想去掉可以采用对象赋值的方式。

举个例子：Object.assign({ },this.owner)

扩展知识：Object.assign() 方法将所有可枚举和自有属性从一个或多个源对象复制到目标对象，返回修改后的对象。

第二种： 比如说 list 里面存放的就是那些带有 __ob__:Observer 的数据，那么可以使用 JSON.parse(JSON.stringify(this.list)) 来进行解决

第三种： 直接操作数据

// 将后端返回的数据，赋值给我们定义的变量
// 举个例子：我们定义的变量叫做 tableData
this.tableData = res.data;  // 我们把后端返回的数据，赋值给我们的变量 this.tableData
如果我们是在控制台输出:  console.log(this.tableData.id)  // 就会返回 undefined
但是如果我们加上索引:  console.log(this.tableData[0].id)  // 就会得到我们想要的 id 了

总结

到此这篇关于关于Vue "__ob__:Observer"属性的解决方案的文章就介绍到这了,更多相关Vue "__ob__:Observer"属性解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

新手vue构建单页面应用实例代码
本篇文章主要介绍了新手vue构建单页面应用实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
html+vue.js 实现漂亮分页功能可兼容IE
功能比较简单，在单一html中使用vue.js分页展示数据，并未安装脚手架，或使用相关UI框架，此时需要手写一个分页器，不失为最合理最便捷的解决方案,需要的朋友可以参考下
2020-11-11
vue使用swiper.js重叠轮播组建样式
这篇文章主要为大家详细介绍了vue使用swiper.js重叠轮播组建样式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
Vue axios和vue-axios的关系及使用区别
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍Vue axios和vue-axios关系，感兴趣的朋友一起看看吧
2022-08-08
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
重新认识vue之事件阻止冒泡的实现
这篇文章主要介绍了重新认识vue之事件阻止冒泡的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
在Vue.js中加载字体的正确方法
这篇文章主要介绍了在Vue.js中加载字体的正确方法,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
浅谈vue权限管理实现及流程
这篇文章主要介绍了浅谈vue权限管理实现及流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue父子传递实例讲解
在本篇文章里小编给大家整理的是关于Vue父子传递实例讲解，需要的朋友们可以跟着学习参考下。
2020-02-02
VUE中Non-Props属性的使用
本文主要介绍了VUE中Non-Props属性的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05