Wie kann ich die an ein Element gebundene Vue-Methode anzeigen, wenn ich das Element in einem Browser wie Chrome inspiziere?

Question

Jeder weiß, dass in der vorherigen JQ-Ära Ereignisbehandlungsfunktionen hinzugefügt werden konnten, indem Attribute wie onclick zum Tag hinzugefügt wurden. In diesem Fall können Sie erkennen, welche Methode gebunden ist, indem Sie mit der rechten Maustaste auf das Element im Browser klicken, und Sie können sogar sehen, in welcher Zeile im Code sich diese Methode befindet.
Nach dem Aufkommen von Vue ist es jedoch zu einem Problem geworden, die Funktion einer Schaltfläche zu kennen. Die im Quellcode geschriebene @click='Methode wird von Vue verarbeitet und ausgeblendet, sodass die Schaltfläche nicht direkt sichtbar ist Wenn Sie Maßnahmen ergreifen, müssen Sie immer noch im Quellcode danach suchen, was sehr ineffizient ist. Die Frage ist also, wie können wir direkt im Browser sehen, an welche Vue-Methode der Button gebunden ist und in welcher Zeile er sich befindet?

Answer 1

看来没人知道呀，也没人想过这个问题。算了，我还是自己写个插件吧

Answer 2

你可以使用 vue-devtools

Answer 3

右键网页源代码查看，直接在相关元素上找到绑定处理方法，然后在source面板的相关js中search，就可以定位到具体某一行。

Answer 4

查看 DOM 元素的事件：

直接点击第一个，打开 Vue 文件，然后设置断点，断到断点之后，就可以看 fn 绑定的是哪个方法了：

在 console 里输入 fn，敲回车，然后点击输出的方法名：

自动跳到 Sources 中的方法：

Answer 5

https://chrome.google.com/web...