vue中__ob__:?Observer的踩坑記錄
vue中__ob__: Observer踩坑
問題分析
看這個(gè)問題的朋友先看看情況是不是和我一樣，再往下看
我的問題是一個(gè)對象數(shù)組，push進(jìn)去對象的話，打印出來看，顯示的是 [ob: Observer]，點(diǎn)看能看到里面的數(shù)據(jù)，但是我遍歷他的話一個(gè)值也拿不到，拿到的是空值，如果push的普通的數(shù)字，字符串啥的就沒事。
如果問題一樣的話可以繼續(xù)往下看了。
經(jīng)過半天的各種分析，網(wǎng)上看博客，然后自己也嘗試了在不同位置打console.log和斷點(diǎn)查看，
發(fā)現(xiàn)在給對象數(shù)組中push進(jìn)去數(shù)據(jù)的時(shí)候，打印出來就是完美的對象數(shù)組，可以遍歷，但是我要用的時(shí)候的那個(gè)地方打印出來就是這樣的 [ob: Observer]，而且他的console比push數(shù)據(jù)的地方打印出來的快，提前打印了，說明了現(xiàn)在是異步操作，我要用的地方數(shù)據(jù)提前打印了。
解決問題
開始我用了async await 來阻塞它，但是沒啥用，最后沒辦法，只能用監(jiān)聽了
在監(jiān)聽這里不停的操作他，最后才解決了問題
一些小坑
JS中include不能查看對象是否重復(fù)
我操作的話是把對象JSON.stringify成字符串，存的時(shí)候也是按照這樣存，查的時(shí)候也這樣查，用的時(shí)候使用數(shù)組的map方法修改他的值，更改之后使用。
vue中__ob__: Observer屬性對象
__ob__: Observer是什么？
_ob__: Observer這些數(shù)據(jù)是vue這個(gè)框架對數(shù)據(jù)設(shè)置的監(jiān)控器，一般都是不可枚舉的。
1.vue中為什么[__ob__: Observer]下無法取到數(shù)據(jù)或者取數(shù)據(jù)時(shí)出現(xiàn)慢一步的情況
_ob__: Observer表示很無辜。一般情況時(shí)數(shù)據(jù)本身的問題，考慮賦值是否時(shí)異步了或者慢于監(jiān)聽器。這一點(diǎn)需要注意。
2._ob__: Observer的取用方式
- 第一種：Object.assign({},this.owner)
- 第二種：JSON.parse(JSON.stringify(this.list))
3.[ob: Observer]： 可視察數(shù)組，不能通過tableData === []這樣判斷是否為空，需要使用數(shù)組的長度判斷才有效：tableData.length > 0
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- Vue之Dep和Observer的用法及說明
- vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實(shí)例詳解
- 關(guān)于Vue?"__ob__:Observer"屬性的解決方案詳析
- Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解
- vue中關(guān)于_ob_:observer的處理方式
- Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
- Vue響應(yīng)式原理Observer、Dep、Watcher理解
- vue中{__ob__: observer}對象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷方式
相關(guān)文章
這篇文章主要為大家介紹了vue.js實(shí)現(xiàn)全屏顯示功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
nuxt.js中間件實(shí)現(xiàn)攔截權(quán)限判斷的方法
這篇文章主要介紹了nuxt.js中間件實(shí)現(xiàn)攔截權(quán)限判斷的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過組價(jià)刷新的案列給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
vue項(xiàng)目環(huán)境搭建?啟動(dòng)?移植操作示例及目錄結(jié)構(gòu)分析
這篇文章主要介紹了vue項(xiàng)目環(huán)境搭建、啟動(dòng)、項(xiàng)目移植、項(xiàng)目目錄結(jié)構(gòu)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
我們在做項(xiàng)目的時(shí)候經(jīng)常會(huì)遇到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于Vite配置代理Proxy解決跨域問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue項(xiàng)目中如何添加枚舉，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
svg圖片在項(xiàng)目中使用的非常廣泛,下面這篇文章主要給大家介紹了關(guān)于vue3使用svg圖標(biāo)的多種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
組合式API為Vue3帶來了更好的邏輯組織和復(fù)用性,支持TypeScript,提供靈活的響應(yīng)式系統(tǒng),它允許開發(fā)者將相關(guān)邏輯組合在一起,通過composable函數(shù)實(shí)現(xiàn)邏輯復(fù)用,擺脫了mixin的缺點(diǎn),同時(shí),組合式API與TypeScript的集成更緊密,能夠提供更準(zhǔn)確的類型推斷2024-10-10
今天小編就為大家分享一篇vue中,在本地緩存中讀寫數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09