前言

Vue中借助data實現(xiàn)了數(shù)據(jù)的存儲和中轉(zhuǎn),方便了界面的綁定渲染和值使用.

一些時候,為了調(diào)試程序,我們可能需要通過瀏覽器來查看data中的值到底目前是一個什么情況,方便調(diào)試和查找問題.

而現(xiàn)有基于Vue-cli框架和單個頁面的Vue在定義時,會導(dǎo)致data獲取值方法不相同.尤其是通過Vue-cli創(chuàng)建的,里面的文件都是一個個的組件，如何在控制臺中修改，查看組件data里的值??

(1)沒有或找不到具體的Vue對象

發(fā)現(xiàn)很多通過Vue-Cli創(chuàng)建的具體頁面在定義data后,export時,多半沒有對象(直接頁面),如下:

export default {
  data() {
    return {
      locale,
      labelCol: { span: 2 },
      wrapperCol: { span: 20 },
      other: "",
      form: {
        name: "",
        goodsType: undefined,
        goodsTime: undefined,
        delivery: false,
        type: [],
        goodsDesc: "",
      },
     ...
  },

這樣,我們在瀏覽器中沒有對外的對象,怎么獲取data值,確實令人抓頭...

方法,解助,created方法,在該方法中定義一個myData全局對象實例并指向當(dāng)前對象this,來獲取實例.并通過windows暴露給全局,代碼如下:

created() {
    window.myData = this;//將變量全局化,這樣瀏覽器可以查看當(dāng)前data是什么情況::myData._data
  },

這樣,在瀏覽器控制臺,直接使用myData對象就可以獲取到值,獲取data值,通過myData._data

(2)Vue在外層定義了實例來包裹整個對象

傳統(tǒng)的html形式引用vue可以通過給最外層的vue實例命名方式.這種方式,就比較直接簡單了,可直接通過該實例直接獲取.

var myapp=new Vue({
      el:'#app',
      data:{
      a:1
    }
})

獲取值:在控制臺輸入myapp.a=2改變里面data的值,這樣在瀏覽器控制臺調(diào)試很方便

補充：vue在控制臺展開有值代碼卻獲取不到

1.瀏覽器控制臺獲取到的是當(dāng)前值

當(dāng)我們在console.log輸出測試點開查看是否有值時，發(fā)現(xiàn)明明有值，代碼使用時卻獲取不到，這是因為瀏覽器獲取的是該參數(shù)當(dāng)前的值，而不是你console.log輸出時的值。

可以發(fā)現(xiàn)當(dāng)我們在對展開之前又給它push一個值后，展開的是最新的數(shù)據(jù)而不是調(diào)用它時的數(shù)據(jù)，這點在你展開時瀏覽器其實有說明，不過大家平時可能沒注意。

2.vue this指向發(fā)生改變

這嚴(yán)格來說不屬于該情況，不過也經(jīng)常是我這種小白容易忽略的地方，就放在一起了，方便自己以后查閱。

在使用例如setTimeout等（不知道還有沒有，我目前記得這一個）函數(shù)時，this的指針指向不再指向vm，而是會指向Windows，因此在setTimeout中使用this時會賦值不上，可以在方法內(nèi)使用setTimeout之前重新定義一個參數(shù)將this保存下來。

異步請求

如axios、ajax發(fā)送請求時是異步的，因此在發(fā)送請求后立即調(diào)用想要返回的信息可能為空，但是當(dāng)我們在控制臺展開時接口數(shù)據(jù)返回完成，又能查看到數(shù)據(jù)了?？梢赃x擇停用異步或用setTimeout增加一定的延時。

總結(jié)

到此這篇關(guān)于Vue如何通過瀏覽器控制臺查看全局data值的文章就介紹到這了,更多相關(guān)Vue瀏覽器控制臺查看全局data值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論