快捷導(dǎo)航

關(guān)于Vue?"ob:Observer"屬性的解決方案詳析

更新時間：2022年11月12日 15:11:39 作者：一個水瓶座程序猿.

在操作數(shù)據(jù)的時候發(fā)現(xiàn),__ob__: Observer這個屬性出現(xiàn)之后,如果單獨拿數(shù)據(jù)的值,就會返回undefined,下面這篇文章主要給大家介紹了關(guān)于Vue?"__ob__:Observer"屬性的解決方案,需要的朋友可以參考下

問題描述

我們操作 Vue 數(shù)據(jù)的時候，經(jīng)常會看到這個屬性: __ob__:Observer
在我們操作這個數(shù)據(jù)的時候，如果想要單獨拿這個數(shù)據(jù)里面的值，就會返回 undefined
經(jīng)過我在網(wǎng)上查找相關(guān)資料，發(fā)現(xiàn) __ob__:Observer 是 Vue 中一個非常重要的知識點

原因分析：

那么什么是數(shù)據(jù)對象的 __ob__ 屬性呢？

其實 __ob__:Observer 這些數(shù)據(jù)，是 Vue 框架對數(shù)據(jù)設(shè)置的監(jiān)控器，一般是 不可以被枚舉 的

解決方案：

下面是我在網(wǎng)上查資料找的幾點解決方案，希望可以幫到大家：

第一種： __ob__: Observer 是 Vue 對數(shù)據(jù)監(jiān)控添加的屬性，如果想去掉可以采用對象賦值的方式。

舉個例子：Object.assign({ },this.owner)

擴展知識：Object.assign() 方法將所有可枚舉和自有屬性從一個或多個源對象復(fù)制到目標對象，返回修改后的對象。

第二種： 比如說 list 里面存放的就是那些帶有 __ob__:Observer 的數(shù)據(jù)，那么可以使用 JSON.parse(JSON.stringify(this.list)) 來進行解決

第三種： 直接操作數(shù)據(jù)

// 將后端返回的數(shù)據(jù)，賦值給我們定義的變量
// 舉個例子：我們定義的變量叫做 tableData
this.tableData = res.data;  // 我們把后端返回的數(shù)據(jù)，賦值給我們的變量 this.tableData
如果我們是在控制臺輸出:  console.log(this.tableData.id)  // 就會返回 undefined
但是如果我們加上索引:  console.log(this.tableData[0].id)  // 就會得到我們想要的 id 了

總結(jié)

到此這篇關(guān)于關(guān)于Vue "__ob__:Observer"屬性的解決方案的文章就介紹到這了,更多相關(guān)Vue "__ob__:Observer"屬性解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

關(guān)于ElementUI自定義Table支持render
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue環(huán)境搭建+VSCode+Win10的詳細教程
這篇文章主要介紹了Vue環(huán)境搭建+VSCode+Win10,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-08-08
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-07-07
Vue操作數(shù)組的幾種常用方法小結(jié)
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下
2023-09-09
vue使用canvas實現(xiàn)移動端手寫簽名
這篇文章主要為大家詳細介紹了基于vue使用canvas實現(xiàn)移動端手寫簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
全站最詳細的Vuex教程
vuex是一個專門為vue.js設(shè)計的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了全站最詳細的Vuex教程,需要的朋友可以參考下
2018-04-04
vue video和vue-video-player實現(xiàn)視頻鋪滿教程
這篇文章主要介紹了vue video和vue-video-player實現(xiàn)視頻鋪滿教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
詳解vue中引入stylus及報錯解決方法
這篇文章主要介紹了詳解vue中引入stylus及報錯解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
使用Vue3新特性構(gòu)建動態(tài)表單的方法詳解
傳統(tǒng)的表單開發(fā)通常需要編寫大量的重復(fù)代碼,例如處理用戶輸入、驗證數(shù)據(jù)、更新 UI 等等,為了簡化開發(fā),我們可以借助 Vue 3 的新特性,例如組合式 API 和 ref 對象,所以本文我們將一起學(xué)習(xí)如何使用 Vue 3 的新特性構(gòu)建一個更加靈活、可擴展的動態(tài)表單
2024-06-06
element-UI el-table修改input值視圖不更新問題
這篇文章主要介紹了element-UI el-table修改input值視圖不更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-02-02