手把手教你如何在生产环境检查 Vue 应用程序,音视频开发进阶指南

20 阅读4分钟

后话


对于面试,说几句个人观点。

面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。 其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。

所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。 开源分享:docs.qq.com/doc/DSmRnRG…

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green

=====================================================================================================================================================================================

贡献主题:github.com/xitu/juejin…

==================================================================================================================

theme: juejin

highlight:


作者:Damian Mullins,

译者:前端小智

来源:damimullins

点赞再看,养成习惯

本文 GitHub github.com/qq449245884… 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

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

触发 Prop 值并更新


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

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

找到 Vue 组件实例


首先,我们需要使用Chrome devtools elements面板找到组件的顶级元素。 在本例中,元素是h1:

使用$0命令


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

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

使用document.querySelector方法


我们还可以使用任何DOM查找方法(例如querySelectorgetElementById等)来选择元素。这里我们将使用document.querySelector来查看 Vue 实例:

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

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

锁定 prop 值


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

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

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

JavaScript 和 ES6

在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。

JavaScript部分截图

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】