在开发环境中,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
。 但是,能够检查分配给生产中组件的值仍然非常有用。