vue中__ob__:?Observer的踩坑記錄
vue中__ob__: Observer踩坑
問題分析
看這個問題的朋友先看看情況是不是和我一樣，再往下看
我的問題是一個對象數組，push進去對象的話，打印出來看，顯示的是 [ob: Observer]，點看能看到里面的數據，但是我遍歷他的話一個值也拿不到，拿到的是空值，如果push的普通的數字，字符串啥的就沒事。
如果問題一樣的話可以繼續(xù)往下看了。
經過半天的各種分析，網上看博客，然后自己也嘗試了在不同位置打console.log和斷點查看，
發(fā)現在給對象數組中push進去數據的時候，打印出來就是完美的對象數組，可以遍歷，但是我要用的時候的那個地方打印出來就是這樣的 [ob: Observer]，而且他的console比push數據的地方打印出來的快，提前打印了，說明了現在是異步操作，我要用的地方數據提前打印了。
解決問題
開始我用了async await 來阻塞它，但是沒啥用，最后沒辦法，只能用監(jiān)聽了
在監(jiān)聽這里不停的操作他，最后才解決了問題
一些小坑
JS中include不能查看對象是否重復
我操作的話是把對象JSON.stringify成字符串，存的時候也是按照這樣存，查的時候也這樣查，用的時候使用數組的map方法修改他的值，更改之后使用。
vue中__ob__: Observer屬性對象
__ob__: Observer是什么？
_ob__: Observer這些數據是vue這個框架對數據設置的監(jiān)控器，一般都是不可枚舉的。
1.vue中為什么[__ob__: Observer]下無法取到數據或者取數據時出現慢一步的情況
_ob__: Observer表示很無辜。一般情況時數據本身的問題，考慮賦值是否時異步了或者慢于監(jiān)聽器。這一點需要注意。
2._ob__: Observer的取用方式
- 第一種：Object.assign({},this.owner)
- 第二種：JSON.parse(JSON.stringify(this.list))
3.[ob: Observer]： 可視察數組，不能通過tableData === []這樣判斷是否為空，需要使用數組的長度判斷才有效：tableData.length > 0
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue框架編輯接口頁面實現下拉級聯選擇以及綁定接口所屬模塊，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
使用live-server快速搭建本地服務器+自動刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務器+自動刷新的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue相同路由跳轉強制刷新該路由組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue過濾器filters用于一些常見的文本格式化,通過過濾器可以進行處理成自己想要展示出來的格式,由“管道”符號指示,本文給大家介紹Vue過濾器filters使用方式,感興趣的朋友一起看看吧2023-10-10
虛擬DOM是一種用JavaScript對象來描述真實DOM的技術,通過diff算法實現高效的DOM更新,提高頁面性能,Vue通過render函數和VNode實現虛擬DOM,結合diff算法減少DOM操作,提升用戶體驗2024-12-12
這篇文章主要介紹了多個vue項目實現共用一個node-modules文件夾，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue如何將對象中所有的key賦為空值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解
這篇文章主要為大家介紹了Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue?頁面卡死,點擊無反應的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vuex的幾個屬性及其使用傳參,本文結合實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01