Vue ialah rangka kerja JavaScript popular yang tujuan utamanya adalah untuk menjadikan pembangunan bahagian hadapan lebih mudah dan pantas. Salah satu konsep yang paling biasa digunakan dalam rangka kerja Vue ialah pautan data, yang menjadikan data dalam aplikasi sangat sensitif dan dinamik kepada gelagat pengguna.
Walau bagaimanapun, kadangkala, pembangun mungkin mahu melumpuhkan pautan data dan hanya membenarkan data tertentu berubah dalam keadaan tertentu. Situasi yang paling biasa ialah sekatan dan penapisan data.
Artikel ini akan memperkenalkan cara untuk melumpuhkan pautan data dalam Vue dan hanya berharap untuk menyokong pautan data dalam keadaan khusus tertentu.
1. Apakah pautan data
Dalam Vue, pautan data bermakna apabila satu data berubah, semua data yang berkaitan dengannya juga akan dikemas kini. Mekanisme kaitan ini boleh dicapai melalui sistem responsif Vue.
Sistem reaktif Vue bermaksud bahawa apabila kita menghantar objek kepada tika Vue sebagai data, Vue akan menambah sifatnya sendiri pada objek untuk menjejaki perubahan sifat dalam objek. Apabila sifat ini ditetapkan kepada nilai baharu, Vue akan memberitahu komponen untuk memaparkan semula templat.
Sebagai contoh, katakan kita mempunyai objek dalam contoh Vue:
data: { user: { name: 'John Doe', age: 30 } }
Apabila kami mengemas kini nilai user.age
melalui kod, Vue akan mengemas kini secara automatik dua tempat berikut dalam komponen:
Ini ialah pautan data. Apabila user.age
berubah, bukan sahaja sifat itu sendiri berubah, tetapi sifat lain dan sifat kalkulator yang terlibat di dalamnya dikemas kini.
2. Senario di mana pautan data dilarang
Walaupun pautan data boleh membawa kemudahan yang besar, kadangkala ia mungkin membebankan kita. Dalam sesetengah kes, melumpuhkan pautan data mungkin lebih sesuai, seperti:
Apabila kami perlu menapis beberapa kandungan dalam data, melumpuhkan pautan data mungkin diperlukan. Sebagai contoh, kita mungkin hanya mahu memasukkan nombor dalam kotak input dan tidak menerima aksara bukan angka. Dalam contoh ini, menetapkan model v kotak input akan menyebabkan semua input menjadi rentetan, yang tidak memenuhi keperluan kami. Kami perlu menukarnya dan kemudian memprosesnya melalui kod JavaScript.
Kadangkala kami mahu data hanya dibenarkan berubah dalam keadaan tertentu. Sebagai contoh, tarikh lahir pengguna hanya boleh dikemas kini apabila dia berumur 18 tahun. Di sini, kami perlu melumpuhkan pautan data untuk memastikan data hanya akan berubah apabila syarat dipenuhi.
Dalam sesetengah kes, kami perlu memproses dan mengemas kini data mengikut peraturan logik perniagaan tertentu. Ini mungkin melibatkan pengiraan berbilang atribut, pengesahan data dan beberapa senario khusus lain. Dalam kes ini, melumpuhkan pautan data adalah perlu untuk memastikan pemprosesan dan pengemaskinian data yang lebih lengkap dan tepat.
Kini kami tahu sebab kami perlu melumpuhkan pautan data. Seterusnya, mari lihat cara melakukan ini dalam Vue.
3. Pelaksanaan teknikal melumpuhkan pautan data
Teknologi untuk melumpuhkan pautan data dalam Vue adalah sangat mudah. Hanya gunakan kaedah $set dan $watch yang disediakan oleh Vue sendiri.
Kaedah $set Vue membolehkan kami menambahkan sifat pada objek sedia ada secara dinamik. Kaedah ini memintas sistem reaktif dalam Vue, membolehkan kami mengawal perubahan pada sifat tanpa menyebabkan perubahan pada sifat berkaitan yang lain.
Dalam contoh kod berikut, kami mempunyai contoh Vue dengan sifat objek bernama user
. Kami mahu menetapkan sifat umur dalam objek pengguna kepada nilai baharu dan kami tidak mahu perubahan ini menyebabkan data berkaitan bertindak balas. Melaksanakan kaedah ini adalah mudah:
# 禁止数据联动的代码 export default { data() { return { user: { name: 'John Doe', age: 30 } } }, methods: { updateAge(value) { // 使用 $set 方法更新 user 对象的 age 属性 this.$set(this.user, 'age', value) } } }
Dengan cara ini, apabila kita memanggil kaedah updateAge, kita boleh mengawal perubahan pada user.age.
Kaedah $watch Vue boleh melihat perubahan dalam sifat dalam komponen dan memanggil fungsi sebagai tindak balas. Dengan menggunakan kaedah ini, kita boleh mengawal perubahan atribut dan mengelakkan pautan data daripada berlaku.
Dalam contoh kod berikut, kami mempunyai contoh Vue dengan sifat objek bernama user
. Kami mahu dapat menukar nilai atribut umur dalam objek pengguna hanya dalam keadaan tertentu. Untuk melaksanakan kaedah ini, kita perlu menggunakan kaedah $watch untuk memantau user.age. Apabila hartanah dikemas kini, kami menyemak sama ada syarat itu dipenuhi. Jika ia tidak sepadan, kita hanya perlu menukar harta itu kembali kepada nilai sebelumnya.
# 使用 $watch 方法阻止数据联动 export default { data() { return { user: { name: 'John Doe', age: 30 } } }, watch: { 'user.age'(newValue, oldValue) { if (newValue < 18) { // 如果新值不合法,则将属性设置回旧值 this.user.age = oldValue } } }, methods: { updateAge(value) { this.user.age = value } } }
Dengan cara ini, apabila updateAge
dipanggil, kaedah $watch akan menentukan sama ada perubahan atribut itu sah mengikut peraturan yang ditetapkan. Jika perubahan memenuhi keperluan, nilai baharu ditetapkan ke dalam objek pengguna. Jika keperluan tidak dipenuhi, kaedah $watch mengembalikan nilai sifat yang diubah kepada nilai sebelumnya.
Ringkasan
Melumpuhkan pautan data sangat diperlukan dalam senario tertentu dan boleh membantu kami mengelakkan beberapa masalah yang tidak dijangka dengan berkesan. Terdapat banyak cara untuk melumpuhkan pautan data dalam Vue Artikel ini terutamanya memperkenalkan penggunaan kaedah $set dan $watch, yang merupakan teknologi pelaksanaan paling popular dalam Vue. Apabila anda perlu melaksanakan sekatan data dan operasi penapisan yang serupa dalam Vue, anda boleh menggunakan kaedah ini dengan mudah untuk mengawal perubahan data dan mengelakkan pautan data daripada berlaku.
Atas ialah kandungan terperinci vue melarang pautan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!