怎么在生產環境檢查Vue應用程序

這篇文章將為大家詳細講解有關怎么在生產環境檢查Vue應用程序，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

觸發 Prop 值并更新

除了弄清楚如何檢查Vue內部變量外，我們還嘗試更新組件屬性值。

假設我們有一個組件，該組件的prop控制著一個元素的文本，那么我們如何強制改變該值以觸發UI更新呢?

<template>   <h2>{{ msg }}</h2> </template>  <script> export default {   props: {     msg: {       type: String,       default: ''     }   } }; </script>

找到 Vue 組件實例

首先，我們需要使用Chrome devtools elements面板找到組件的頂級元素。在本例中，元素是h2:

使用$0命令

一旦我們選擇了元素，就可以在控制臺中輸入$0,$0表示最后選擇的元素。$1是之前選擇的元素,依此類推.它記得最后五個元素$0 – $4.

要查看Vue實例的詳細信息，可以使用 $0.__vue__。

使用document.querySelector方法

我們還可以使用任何DOM查找方法(例如querySelector或getElementById等)來選擇元素。這里我們將使用document.querySelector來查看  Vue 實例：

document.querySelector('[data-v-763db97b]').__vue__

這里我們使用通過data 屬性查找元素，但是你可以在querySelector中使用任何有效的CSS選擇器。

鎖定 prop 值

有了Vue組件實例的引用，我們就可以在控制臺中展開它，看看里面有什么內容：

仔細看，在中間看到msg prop，單擊三個點，就會看到當前值。

我們可以在控制臺中使用下面命令查看prop值：

// Using $0 $0.__vue__.msg  // Using querySelector document.querySelector('[data-v-763db97b]').__vue__.msg

更新 prop 值

現在，更新prop值就是將變量重新賦值給它。因此，可以在控制臺上這么做：

$0.__vue__.msg = 'Hello from the updated value!'

關于“怎么在生產環境檢查Vue應用程序”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。