vuedose.tips（翻译系列十八）

Debugging Templates in Vue.js

Let’s end this Vue Tips Overload with a tip from Rubén Valseca. He’s a co-organizer of VueJS Madrid and Frontfest, as well as a web developer and Vue.js instructor. But among all, he’s one of the nicest persons and friends I know!

He’s also coming to talk to the Vue Day, so make sure you’re not missing out!

The Vue.js DevTools are awesome to inspect your Vue app but sometimes you might want to debug things that are happening in your template and as you heard that you can place JavaScript expressions there maybe you’ve tried to place a console.log and find this situation:

image

这是因为您放置在模板Vue中的所有内容都试图在实例中找到它，因此可以将快速解决方案放在组件中的log方法以允许Vue找到它：

and just use {{ log(message) }}.

But this is something that you occasionally want in some different components and it’s a little boring to repeat this code all the time so what can we do is to add an instance property and use the Vue.prototype to place our custom log method in the main.js:

image

因此，现在我们可以在每个组件模板中使用$ log，并且如果我们不想干扰渲染，只需使用带有OR运算符的JS惰性求值

太好了吧？ ：D但是...如果我们要放置一个断点以便在模板周围静默调试一些变量，该怎么办？

如果我们在模板中放置调试器，我们可能会发现：

它甚至没有编译模板！ and如果我们采用与以前相同的策略，我们将在原型函数中找到我们自己，而不是要调试的模板：

因此，为了在模板的中间放置一个断点，我们可以使用一些技巧将调试器包装在IIFE（立即调用函数表达式）中，如下所示

我们将发现自己处于编译的render函数的中间： 在这种情况下，“ _ vm”变量

并且是我们组件的实例:)。检查编译的模板也很有趣，但是由于某些原因，这些变量在chrome devtools的功能范围中不可用，直到我们将它们放在调试器之后：

现在您可以享受检查周围的一切！

就这样！我希望通过这些技巧，您将发现自己对调试Vue模板更有信心，并且也喜欢出于好奇而检查编译的渲染函数的内部内容。