Bilakah kaedah dilaksanakan dalam vue?

Dalam Vue, kaedah ialah fungsi dalam komponen dan digunakan untuk mengendalikan logik perniagaan komponen tersebut. Kaedah boleh digunakan dalam kod templat sebagai pengendali acara atau dipanggil daripada kod JavaScript komponen.

Jadi, bilakah kaedah dalam Vue dilaksanakan? Dalam artikel ini, kami akan meneroka masa pelaksanaan kaedah dalam Vue dan mengetahui lebih lanjut tentang proses pemaparan Vue dan penggunaannya dalam kod.

1. Proses pemaparan Vue

Proses pemaparan Vue adalah sangat penting kerana ia adalah kunci untuk memahami masa pelaksanaan kaedah. Dalam Vue, proses pemaparan dilaksanakan secara rekursif lapisan demi lapisan daripada komponen induk kepada komponen anak sehingga keseluruhan pepohon komponen dipaparkan.

Proses pemaparan Vue dibahagikan kepada tiga peringkat:

1 Peringkat penciptaan (Permulaan): Peringkat ini terutamanya memulakan pelbagai sifat komponen, seperti prop, data, dikira, jam tangan, dsb. .

2. Kompilasi Templat: Susun kod templat ke dalam fungsi render.

3. Fasa pemasangan (Pemasangan): Buat DOM maya yang dijana oleh fungsi pemaparan ke dalam elemen DOM sebenar dan lekapkan komponen ke halaman.

2. Masa pelaksanaan kaedah

Dalam Vue, masa pelaksanaan kaedah dilaksanakan apabila komponen dipaparkan. Kaedah boleh dipanggil terus dalam kod JavaScript komponen atau dicetuskan melalui pengendali acara dalam kod templat. Dalam kedua-dua kes, kaedah akan dilaksanakan semasa proses pemaparan.

Di bawah ini kami menggunakan contoh untuk menggambarkan masa pelaksanaan kaedah.

Pertama, kami mencipta komponen yang mengandungi dua butang.

<template>
  <div>
    <button @click="onClick">点击我1</button>
    <button @click="onClick">点击我2</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

Apabila kami memaparkan komponen ini buat kali pertama, dua butang akan dipaparkan. Apabila pengguna mengklik mana-mana butang, kaedah onClick akan dicetuskan dan konsol akan mengeluarkan mesej "Butang telah diklik".

Ini kerana, semasa proses pemaparan, apabila pengguna mengklik butang, Vue akan menangkap acara melalui pendengar acara asas dan memanggil kaedah tersebut. Dalam proses pemaparan Vue, proses ini berlaku antara fasa penyusunan templat dan fasa pelekap. Maksudnya, apabila kita mengklik butang, Vue telah menyelesaikan penyusunan dan pemaparan kaedah, dan kaedah itu sudah wujud dalam contoh komponen, tetapi ia sentiasa dalam keadaan menunggu, menunggu acara dicetuskan.

3. Aplikasi kaedah

Seperti yang dinyatakan di atas, kaedah dalam Vue boleh dipanggil dalam kod JavaScript komponen atau dicetuskan oleh pengendali acara dalam kod templat. Senario aplikasi kedua-dua kaedah ini adalah seperti berikut:

1 Panggil kaedah dalam kod JavaScript komponen

Apabila kita perlu memproses beberapa logik perniagaan di dalam komponen, kita boleh memanggil. ia dalam kod JavaScript kaedah Panggilan komponen. Sebagai contoh, dalam contoh kami di atas, mengklik butang akan mencetuskan kaedah handleClick dan mengeluarkan "Butang telah diklik" ke konsol.

2. Gunakan kaedah dalam kod templat

Apabila kami perlu mengendalikan operasi pengguna dalam kod templat, kami boleh mengikat kaedah kepada pengendali acara. Sebagai contoh, dalam contoh kami di atas, kami mengikat kaedah onClick kepada dua butang dalam kod templat, yang dicetuskan apabila butang itu diklik. Pendekatan ini sering digunakan untuk mengendalikan interaksi pengguna.

Ringkasnya, kaedah dalam Vue dilaksanakan semasa pemaparan komponen. Dengan menguasai proses pemaparan Vue, kami dapat memahami dengan lebih baik pemasaan pelaksanaan kaedah dan dapat menggunakan kaedah dengan mahir untuk mengendalikan logik perniagaan dan gelagat interaksi pengguna dalam komponen.

Atas ialah kandungan terperinci Bilakah kaedah dilaksanakan dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!