Vue怎么通過瀏覽器控制臺查看全局data值

今天小編給大家分享一下Vue怎么通過瀏覽器控制臺查看全局data值的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

發現很多通過Vue-Cli創建的具體頁面在定義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全局對象實例并指向當前對象this,來獲取實例.并通過windows暴露給全局,代碼如下:

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

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

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

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

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

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

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

1.瀏覽器控制臺獲取到的是當前值

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

可以發現當我們在對展開之前又給它push一個值后，展開的是最新的數據而不是調用它時的數據，這點在你展開時瀏覽器其實有說明，不過大家平時可能沒注意。

2.vue this指向發生改變

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

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

異步請求

如axios、ajax發送請求時是異步的，因此在發送請求后立即調用想要返回的信息可能為空，但是當我們在控制臺展開時接口數據返回完成，又能查看到數據了。可以選擇停用異步或用setTimeout增加一定的延時。

以上就是“Vue怎么通過瀏覽器控制臺查看全局data值”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。