vue中出现__ob__: Observer属性的数组无法取值

vue中出现__ob__: Observer属性的数组无法取值

问题的出现背景

在vue生命周期中进行获取数据,数据返回之后给data中的数组进行赋值,在操作的过程中这个数组就会带上这个__ob__: Observer属性。我的具体情况是这样的:
在这里插入图片描述
ob_: Observer这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的。所以我一直使用下标去获取数组中的值,是获取不到的,但是在进行console.log是可以看到数据的。

console.log这样的打印函数,被打印的变量会执行自身的toString(),这样,即便内部属性是不可枚举,实际上也能看到。

出现原因

在网上搞了半天,都说是使用JSON.parse(JSON.stringify(数组))进行深拷贝,我刚开始获取不到值的时候就已经使用过这个方法了,结果依旧是不能将值获取到。由于这两个都是异步的方法,而在第一个方法还在对数组进行操作的时候,第二个方法就开始使用这个数组了,引用的是还没有赋值的方法,赋值之后,因为是地址引用,那个数组已经被修改了,显示零是原来的长度,但包含修改后的结果。总的来说第二个方法就是引用了一个空的数组。

解决办法

将第二个方法的调用放在第一个方法的内部,放于给数组赋值之后。
由于两个都是异步请求,但是第二个方法又依赖于第一个方法的返回值,我一想到这里,一拍桌面,这不就是回调地狱嘛!由于我整个项目都是使用的async/await,虽然修饰之后的方法是同步的,但是mouted里面的两个方法调用的代码不是同步的!!用了async/await之后,回调地狱的思想在整个项目设计过程中没有涉及,如果使用ES6的promise应该会很好的避免这种问题的产生。

猜你喜欢

转载自blog.csdn.net/weixin_43242112/article/details/106354901