tips：生产环境如何检查Vue应用程序？

原创已于 2023-10-08 21:15:07 修改 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-09-24 20:12:37 首次发布

vue 专栏收录该内容

7 篇文章

订阅专栏

在开发环境中，Vue devtools 是很有用。但是，一旦部署到生产环境，它就不再可以访问我们所编写的代码。那么发布到生产环境时，我们要怎么检查应用程序呢？

触发 Prop 值并更新

假设我们有一个组件，该组件的prop控制着一个元素的文本，那么我们如何强制改变该值以触发UI更新呢？

<template>
  <h1>{{ msg }}</h1>
</template>

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

找到 Vue 组件实例

首先，我们需要使用Chrome devtools elements面板找到组件的顶级元素。在本例中，元素是h1:
在这里插入图片描述

使用$0命令

一旦我们选择了元素，就可以在控制台中输入$0,$0表示最后选择的元素。$1是之前选择的元素,依此类推.它记得最后五个元素$0 – $4.

要查看Vue实例的详细信息，可以使用 $0.__vue__。

使用document.querySelector方法

我们还可以使用任何DOM查找方法（例如querySelector或getElementById等）来选择元素。这里我们将使用document.querySelector来查看 Vue 实例：

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

锁定 prop 值

有了Vue组件实例的引用，我们就可以在控制台中展开它，看看里面有什么内容：
在这里插入图片描述
在中间看到msg prop，单击三个点，就会看到当前值。
我们可以在控制台中使用下面命令查看prop值：

// Using $0
$0.__vue__.msg

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

更新 prop 值

现在，更新prop值就是将变量重新赋值给它。因此，可以在控制台上这么做：

$0.__vue__.msg = 'update msg value!'

总结

我们使用了Chrome devtools控制台来定位元素并检查相关的Vue组件实例详细信息，并操纵Vue实例对象以更新prop值。

当前这种更新方式也有局限性，例如无法更新计算的、属性，因为它们没有setter。但是，能够检查分配给生产中组件的值仍然非常有用。