Bagaimana untuk melihat kaedah Vue yang terikat pada elemen semasa memeriksa elemen dalam pelayar seperti chrome?

Question

Semua orang tahu bahawa pada era jq sebelumnya, fungsi pengendalian acara boleh ditambah dengan menambahkan atribut seperti onclick pada tag. Dalam kes ini, anda boleh mengetahui kaedah mana yang terikat dengan mengklik kanan pada elemen dalam penyemak imbas, dan anda juga boleh melihat baris mana dalam kod kaedah ini dihidupkan.
Namun, selepas kemunculan Vue, ingin tahu apa yang dilakukan oleh butang menjadi sakit kepala @click='method' yang ditulis dalam kod sumber akan diproses dan disembunyikan oleh Vue, sehingga butang itu tidak dapat dilihat secara langsung mengambil tindakan, anda masih perlu mencarinya dalam kod sumber, yang sangat tidak cekap. Jadi persoalannya, bagaimana kita boleh melihat secara langsung dalam penyemak imbas kaedah Vue mana butang itu terikat dan baris mana ia berada?

Answer 1

Nampaknya tiada siapa yang tahu, dan tiada siapa yang terfikir tentang isu ini. Lupakan saja, saya hanya akan menulis pemalam sendiri

Answer 2

Anda boleh menggunakan vue-devtools

Answer 3

Klik kanan kod sumber halaman web untuk melihatnya, cari kaedah pemprosesan mengikat terus pada elemen yang berkaitan, dan kemudian cari dalam js yang berkaitan dalam panel sumber untuk mencari baris tertentu.

Answer 4

Lihat acara elemen DOM:

Klik terus pada yang pertama, buka fail Vue, dan kemudian tetapkan titik putus Selepas pecah ke titik putus, anda boleh melihat kaedah fn terikat kepada:

.

Masukkan fn dalam konsol, tekan Enter, dan kemudian klik nama kaedah output:

Cara melompat ke Sumber secara automatik:

Answer 5

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