javascript - Bagaimanakah vue mendengar peristiwa perubahan untuk melaksanakan pengikatan dua hala?

Question

Kami menggunakan peristiwa asli untuk mendengar kotak input dan mengikat acara sedemikian apabila ia berubah Syarat untuk melaksanakan fungsi panggil balik ini ialah selepas kotak input dikaburkan

el.addEventListener('change', function(e){
    console.log(e.target.value);
})

Tetapi rangka kerja seperti Vue.js dan React.js tidak memerlukan kabur untuk mencetuskan fungsi panggil balik untuk input yang terikat pada peristiwa perubahan Sebaliknya, setiap input masa nyata akan mencetuskan panggilan balik, sama seperti acara onpropertychange IE.

Bagaimana ini dilakukan?

Answer 1

Tetapi rangka kerja seperti Vue.js dan React.js tidak memerlukan kabur untuk mencetuskan fungsi panggil balik untuk input yang terikat pada peristiwa perubahan Sebaliknya, setiap input masa nyata akan mencetuskan panggilan balik, sama seperti acara onpropertychange IE. Bagaimana ini dilakukan?

Kotak input dalam vue mendengar acara input secara lalai, jadi input akan mencetuskan panggilan balik. Anda boleh mengubahnya untuk mencetuskan perubahan dengan cara berikut.

<input v-model.lazy="msg" >

Answer 2

Malah, masih terdapat pemantauan peristiwa DOM di bahagian bawah peringkat rangka kerja Contohnya, kotak input input yang anda nyatakan memantau peristiwa input, tetapi rangka kerja Vue tidak perlu menulis operasi dalam peristiwa input (walaupun boleh. ditulis), dan secara automatik menukar perubahan DOM kepada Perubahan kepada model data.

Saya baru-baru ini membuat perkongsian di gitchat, anda boleh menyemaknya di sini. JavaScript Lanjutan: Pemahaman mendalam tentang pengikatan data dua hala

Answer 3

Menurut soalan anda, anda ingin mengetahui prinsip pelaksanaan pengikatan dua hala Vue masih terdapat banyak artikel sedemikian dalam SF.
@Dengmuqin sebenarnya telah dicuri Untuk artikel ini, sila rujuk penerangan pautan di bawah