欢乐颂小说结局是什么,好看的言情小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

我們團(tuán)隊(duì)在Vue3DevTools的幫助下，調(diào)試效率有了質(zhì)的飛躍！

Vue3 已經(jīng)出來(lái)了， Vue3 Devtools 正式版也快出來(lái)了，目前我們?cè)谟玫氖?beta 版本，現(xiàn)在我們來(lái)看看 Vue3 Devtoolls 有哪些新的功能。

安裝

打開(kāi)谷應(yīng)用商店，搜索 vue devtools，選擇 beat 的標(biāo)識(shí)安裝，如下所示：

注意，在使用 Vue3 devtools 時(shí)，要把 Vue2 devtools 的關(guān)掉，以免造成混淆。

第一步完成，如果商店打開(kāi)不了的，自行百度，方法反正你們肯定比我多。

開(kāi)始使用

安裝完成了，我們打開(kāi)控制臺(tái)就有一個(gè) Vue 的 tab，如果下所示：

multi-app (多應(yīng)用視圖)

多應(yīng)用視圖，意思就是我們可以查看多個(gè)應(yīng)用，比如我在項(xiàng)目中添加多個(gè) createApp 如下所示：

 
 
 
 
  
  
  
  import { createApp } from 'vue'   
  
  
  import App from './App.vue'   
  
  
  import App2 from './App2.vue'   
  
  
  import App3 from './App3.vue'   
  
  
     
  
  
  createApp(App).mount('#app')   
  
  
  createApp(App2).mount('#app1')   
  
  
  createApp(App3).mount('#app2')

控制臺(tái)打開(kāi)查看:

在有多個(gè)Vue應(yīng)用程序的瀏覽器頁(yè)面中，可以在它們之間快速交換，并有能力檢查在iframe內(nèi)的Vue應(yīng)用程序。

inspector tab (檢查器選項(xiàng)卡)

我們可以通過(guò)檢查器查看每個(gè)組件的狀態(tài)，這個(gè)檢查器就是羅盤(pán)狀的圖標(biāo)。

組件操作圖標(biāo)

當(dāng)選擇一個(gè)組件時(shí)，會(huì)看到右上方有一組三個(gè)不同的圖標(biāo)。

第一個(gè)眼睛的圖標(biāo)的表示 Scroll to component。當(dāng)點(diǎn)擊這個(gè)圖標(biāo)時(shí)，瀏覽器將會(huì)滾動(dòng)到組件所在的位置。

第二個(gè) <> 表示的是 Show render code。當(dāng)點(diǎn)擊這個(gè)圖標(biāo)時(shí)，可以看到當(dāng)前組件的Render函數(shù)。

最后，帶有<的漢堡包圖標(biāo)表示檢查DOM。點(diǎn)擊它時(shí)，就會(huì)顯示組件也表示 Dom 的位置。

多根組件

你可能已經(jīng)注意到了，在我們組件旁邊有些小標(biāo)簽，如下所示：

首先可以看到有 fragment 標(biāo)記，它表示多根組件，啥是多根，直接看我們FragmentComponent.vue 的內(nèi)容：

多根就是沒(méi)有像 Vue2 一樣，只有一個(gè)根元素，不能多個(gè)。

性能指示

除了多根組件的標(biāo)識(shí)，我們還可以看到一些數(shù)字的標(biāo)識(shí)：

當(dāng)我們的組件因?yàn)槠滗秩舅俣嚷憩F(xiàn)不佳時(shí)，它就會(huì)顯示出來(lái)，告訴我們哪些組件耗時(shí)比較嚴(yán)重。

如上圖所示，當(dāng)你把鼠標(biāo)懸停在它上面時(shí)，可以看到有更多信息提示。

路由指示器

除了多根和性能指示器外，還有一個(gè)路由指示器：

這個(gè)新特性在快速查看 links 的設(shè)置很方便。但奇怪的是，這個(gè)特性并不是由 Vue tools 本身直接添加的，而是由Vue Router 添加的.

插件

新的Vue dev-tools 還有一個(gè)很重要的功能就是它完全可以與外部插件集成。我們可以很方便的查看使用到的插件信息。

我們事例的項(xiàng)目，已經(jīng)使用兩個(gè)庫(kù)：Vuex和 Vue Router，點(diǎn)擊 Components 下拉，就可以看到這兩兄弟：

點(diǎn)擊其它中就會(huì)看到該插件的自定義視圖。例如，Vue Router面板向我們展示了當(dāng)前可用的路由列表。

Timeline

在檢查器的旁邊，我們還可以看到這個(gè)：

這個(gè)就是 Timeline，我們先叫它時(shí)間線吧。

當(dāng)你第一次打開(kāi)它的時(shí)候(如果你還沒(méi)有接觸過(guò)你的應(yīng)用程序的話)，你會(huì)看到一個(gè)空白的中央?yún)^(qū)域，左邊有彩色的項(xiàng)目符號(hào)。

每個(gè)顏色編碼的通道都將顯示應(yīng)用程序?qū)崟r(shí)觸發(fā)的事件的時(shí)間軸。

例如，我們點(diǎn)擊一個(gè)路由的時(shí)候，下面的點(diǎn)會(huì)出現(xiàn)在實(shí)際時(shí)間線的右側(cè)。

這乍一看好像沒(méi)啥軟用，但這些小點(diǎn)里裝著很多信息。

如果我點(diǎn)擊其中一個(gè)紫色的 Mouse 事件，在最右邊的第三個(gè)面板顯示以下信息。

不僅我的點(diǎn)擊事件被注冊(cè)，而且我的 mouseup 和 mousedown 事件也包含了點(diǎn)擊。我們甚至可以獲得鼠標(biāo)事件捕獲的 x 和 y 坐標(biāo)。

藍(lán)色的圈表示路由的信息，點(diǎn)擊藍(lán)色的圈就可以看到路由的詳細(xì)信息。如下所示：

組件事件也會(huì)顯示完整的有效載荷信息。例如，像這樣一個(gè)簡(jiǎn)單按鈕的點(diǎn)擊事件。

 
 
 
 
  
  
  
  Click me

如果你覺(jué)得面板展示太多選項(xiàng)，有點(diǎn)暈，我們可以點(diǎn)擊右上角的來(lái)關(guān)掉一些我們不想的：

在編輯器中打開(kāi)

當(dāng)在檢查器中選擇你的一個(gè)自定義組件時(shí)，如果我們想它具體的定義，還可以直接在編輯器中打開(kāi)

如果單擊此按鈕，編輯器將打開(kāi)該文件對(duì)應(yīng)的文件!

網(wǎng)站名稱：我們團(tuán)隊(duì)在Vue3DevTools的幫助下，調(diào)試效率有了質(zhì)的飛躍！
鏈接URL：http://m.fisionsoft.com.cn/article/dhodpes.html