快捷導(dǎo)航

Vue如何通過(guò)瀏覽器控制臺(tái)查看全局data值

更新時(shí)間：2023年04月14日 11:09:10 作者：第一段代碼

在寫(xiě)vue項(xiàng)目時(shí)想到一個(gè)問(wèn)題,項(xiàng)目里面的文件都是一個(gè)個(gè)的組件,如何在控制臺(tái)中修改,查看組件data里的值呢,下面這篇文章主要給大家介紹了關(guān)于Vue如何通過(guò)瀏覽器控制臺(tái)查看全局data值的相關(guān)資料,需要的朋友可以參考下

前言

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

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

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

(1)沒(méi)有或找不到具體的Vue對(duì)象

發(fā)現(xiàn)很多通過(guò)Vue-Cli創(chuàng)建的具體頁(yè)面在定義data后,export時(shí),多半沒(méi)有對(duì)象(直接頁(yè)面),如下:

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

這樣,我們?cè)跒g覽器中沒(méi)有對(duì)外的對(duì)象,怎么獲取data值,確實(shí)令人抓頭...

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

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

這樣,在瀏覽器控制臺(tái),直接使用myData對(duì)象就可以獲取到值,獲取data值,通過(guò)myData._data

(2)Vue在外層定義了實(shí)例來(lái)包裹整個(gè)對(duì)象

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

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

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

補(bǔ)充：vue在控制臺(tái)展開(kāi)有值代碼卻獲取不到

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

當(dāng)我們?cè)赾onsole.log輸出測(cè)試點(diǎn)開(kāi)查看是否有值時(shí)，發(fā)現(xiàn)明明有值，代碼使用時(shí)卻獲取不到，這是因?yàn)闉g覽器獲取的是該參數(shù)當(dāng)前的值，而不是你console.log輸出時(shí)的值。

可以發(fā)現(xiàn)當(dāng)我們?cè)趯?duì)展開(kāi)之前又給它push一個(gè)值后，展開(kāi)的是最新的數(shù)據(jù)而不是調(diào)用它時(shí)的數(shù)據(jù)，這點(diǎn)在你展開(kāi)時(shí)瀏覽器其實(shí)有說(shuō)明，不過(guò)大家平時(shí)可能沒(méi)注意。

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

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

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

異步請(qǐng)求

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