本已经过原作者 Damian Mullins 授权翻译。

在开发环境中，Vue devtools 是很有用。但是，一旦部署到生产环境，它就不再可以访问我们所编写的代码。那么发布到生产环境时，我们要怎么检查应用程序呢？在这篇文章中，我们会介绍一些技巧，用来检查和调试我们的代码。

触发 Prop 值并更新

除了弄清楚如何检查Vue内部变量外，我们还尝试更新组件属性值。

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

`{{ msg }}`

找到 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__

这里我们使用通过data 属性查找元素，但是你可以在querySelector中使用任何有效的CSS选择器。

锁定 prop 值

有了Vue组件实例的引用，我们就可以在控制台中展开它，看看里面有什么内容：

仔细看，在中间看到msg prop，单击三个点，就会看到当前值。

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

// Using $0$0.__vue__.msg

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

更新 prop 值

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

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

瞧，UI更新啦！

总结

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

需要注意的一件事是，更新不仅限于字符串值，还可以更新任何其他类型的属性，例如布尔值和数字。

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

作者：Damian Mullins, 译者：前端小智来源：damimullins原文：https://www.damimullins.com/inspecting-a-vue-applicaon-in-production/

❤️爱心三连击

1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我创作的动力。

2.关注公众号大迁世界，回复「1」加入前端进阶交流群！「在这里有好多前端开发者，会讨论前端知识，互相学习」！

3.也可添加微信【qq449245884】，一起成长。

vue 属性是变量_手把手教你如何在生产环境检查 Vue 应用程序相关推荐

如何把手变成手控_手把手教您如何在生产环境直接web级设计图形报表
相信很多从事数据分析的兄弟姐妹,对于数据报表的设计,图形化的设计等等,都是停留在后台进行模板设计,设计好模板后,再上传到前台,发布进行显示,这也是目前绝大多数工具的模式.也难怪,因为目前国内数一数二的 ...
python numpy安装教程_手把手教你搭建机器学习开发环境—Python与NumPy的超简安装教程...
手把手教你搭建机器学习开发环境Python语言是机器学习的基础,所以,想要入门机器学习,配置好Python的开发环境是第一步.本文就手把手的教你配置好基于Python的机器学习开发环境.超简单!第一步 ...
vue 文字无缝滚动_手把手教你搭建 Vue 聊天室
WebSocket简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,并且允许服务端主动向客户端推送数据.(HTTP协 ...
手把手教安装java开发环境_手把手教你配置java开发环境-java环境变量设置
在本篇中将为大家介绍如何在windows下搭建Java的开发环境. 话不多说,直接转入正题.下载java开发工具包JDK 下载地址:http://www.oracle.com/technetwork/ ...
java tomcat 环境变量配置_手把手教你如何配置tomcat环境变量
我们下载安装了tomcat,那么tomcat环境变量配置怎么配置?下面小编就和大家分享下tomcat环境变量的配置.首先介绍安装JDK和Tomcat 一.安装JDK和Tomcat 1.安装JDK:直接 ...
vue代码生成器可视化界面_手把手教你基于SqlSugar4编写一个可视化代码生成器（生成实体，以SqlServer为例，文末附源码）...
在开发过程中免不了创建实体类,字段少的表可以手动编写,但是字段多还用手动创建的话不免有些浪费时间,假如一张表有100多个字段,手写有些不现实. 这时我们会借助一些工具,如:动软代码生成器.各种ORM框 ...
手把手教你从0开始搭建一个vue项目（完结）
前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
软件_手把手教vscode配置c++,python开发环境
原创:软件_手把手教vscode配置c++,python开发环境之前主用Python作为项目开发语言,将项目迁移到arm边缘盒子上后发现arm的cpu不给力,软件速度低于预期,所以计划将部分程序改为 ...

vue 属性是变量_手把手教你如何在生产环境检查 Vue 应用程序

触发 Prop 值并更新

`{{ msg }}`

找到 Vue 组件实例

使用`$0`命令

使用document.querySelector方法

锁定 prop 值

更新 prop 值

总结

❤️爱心三连击

vue 属性是变量_手把手教你如何在生产环境检查 Vue 应用程序相关推荐

最新文章

热门文章

vue 属性是变量_手把手教你如何在生产环境检查 Vue 应用程序

触发 Prop 值并更新

{{ msg }}

找到 Vue 组件实例

使用$0命令

使用document.querySelector方法

锁定 prop 值

更新 prop 值

总结

❤️爱心三连击

vue 属性是变量_手把手教你如何在生产环境检查 Vue 应用程序相关推荐

最新文章

热门文章

`{{ msg }}`

使用`$0`命令