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

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

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

問題描述

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

原因分析：

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

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

解決方案：

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

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

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

解決vue頁面渲染但dom沒渲染的操作
這篇文章主要介紹了解決vue頁面渲染但dom沒渲染的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
淺談VUE uni-app 自定義組件
這篇文章主要介紹了uni-app 的自定義組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-10-10
mpvue全局引入sass文件的方法步驟
這篇文章主要介紹了mpvue全局引入sass文件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue中SourceMap的使用解讀
這篇文章主要介紹了Vue中SourceMap的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例
今天小編就為大家分享一篇Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能
這篇文章主要介紹了Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能,本文通過截圖實(shí)例代碼說明給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
Vue3內(nèi)置組件Teleport使用方法詳解
這篇文章主要介紹了Vue3內(nèi)置組件Teleport使用方法，Teleport是Vue 3.0 新增的一個(gè)內(nèi)置組件，主要是為了解決一些特殊場景下模態(tài)對話框組件、組件的渲染，帶著些許的了解一起走進(jìn)下面文章的詳細(xì)內(nèi)容吧
2021-10-10
vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法
今天小編就為大家分享一篇vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
element ui el-date-picker組件默認(rèn)值方式
這篇文章主要介紹了element ui el-date-picker組件默認(rèn)值方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
概述VUE2.0不可忽視的很多變化
本文給大家分析下vue2.0幾個(gè)重要的與自己目前項(xiàng)目相關(guān)的變化，也是vue2.0不可忽視的變化，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-09-09