Dalam Vue.js, pengikatan data dua hala ialah salah satu ciri yang paling penting dan tersendiri. Teknologi teras untuk melaksanakan pengikatan data dua hala ialah corak penjejakan pergantungan dan terbitkan/langgan. Dalam Vue.js, objek yang dipanggil Watcher memainkan peranan yang sangat penting adalah untuk memberitahu lapisan paparan perubahan data dan memastikan penyegerakan data dan pandangan.
Walau bagaimanapun, Watcher sendiri bukanlah entiti bebas, tetapi dicipta dalam Dep (iaitu, pelanggan). Hubungan antara mereka adalah seperti pemerhati dan topik dalam corak penerbitan/pelanggan.
Jadi, apa yang mereka maksudkan?
Pemerhati: Pemerhati, bertanggungjawab untuk melanggan perubahan data Setelah data berubah, ia mencetuskan operasi kemas kini dan memberitahu lapisan paparan untuk dipaparkan semula.
Dep: Topik, pusat data, bertanggungjawab mengurus semua Pemerhati dan memberitahu Pemerhati untuk mengemas kini apabila data berubah.
Ingat pengikatan data yang kami gunakan dalam Vue.js?
<template> <div> <input type="text" v-model="message"> <h2>{{ message }}</h2> </div> </template> <script> export default { data () { return { message: 'Hello Vue!' } } } </script>
Dalam contoh ini, kami mengikat data message
ke elemen <input>
dan juga mengikatnya serentak dengan elemen <h2>
. Beginilah cara pengikatan dua hala Vue.js digunakan.
Apabila kami menjalankan aplikasi ini, Vue.js mula melaksanakan penyusunan templat, menganalisis arahan dalam templat dan mewujudkan gambar rajah hubungan antara nod DOM dan Watcher.
Dalam erti kata lain, cipta objek Pemerhati pada elemen <input>
, yang akan mendengar perubahan dalam data message
dan mengemas kininya kepada lapisan paparan dengan segera.
Dalam proses ini, peranan pelanggan Dep dicerminkan. Apabila data message
berubah, ia akan memberitahu semua objek Pemerhati untuk melakukan operasi kemas kini dan membenarkan mereka memaparkan semula paparan.
Secara amnya, pelanggan Dep ialah komponen yang sangat penting dalam rangka kerja Vue.js Ia berfungsi rapat dengan objek Watcher untuk melengkapkan teknologi teras pengikatan data dua hala dalam Vue.js.
Atas ialah kandungan terperinci Apakah pelanggan mengikat dua hala Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!