Prinsip data responsif Vue dan perbezaan antara Vue.set dan Vue.$set

Vue ialah rangka kerja pembangunan yang popular dalam medan bahagian hadapan semasa Salah satu mekanisme terasnya yang boleh mencetuskan kemas kini paparan melalui pengubahsuaian data ialah data responsif. Artikel ini akan menyelidiki prinsip data reaktif Vue dan meneroka perbezaan antara Vue.set dan Vue.$set.

1. Prinsip data responsif Vue

Vue akan merampas sumber data terlebih dahulu Untuk menentukan sumber data, ia hanya perlu memenuhi tiga syarat berikut: objek tidak kosong, dan objek bukan objek beku atau tertutup , objek itu bukan contoh Vue itu sendiri. Apabila objek yang diperlukan memenuhi syarat, Vue akan menambah contoh Observe pada objek The Observe akan menambah contoh Dep pada setiap sifat objek Apabila nilai sifat adalah objek, contoh Dep bagi harta itu akan menjadi miliknya Contoh Dep. Ini membolehkan pengikatan sifat.

Apabila mengubah suai data dalam tika Vue, Vue akan memintas operasi baca dan tulis data melalui getter dan setter, dengan itu mencetuskan kemas kini nilai atribut Operasi setter akan memberitahu kejadian Dep atribut kepunyaan mengemas kini pemberitahuan Ini mencetuskan kemas kini paparan. Beginilah cara Vue melaksanakan data responsif.

2. Perbezaan antara Vue.set dan Vue.$set

Dalam Vue, kami sering mengubah suai data dalam data dan mengikatnya pada paparan melalui model v, supaya dalam When data diubah suai, Vue boleh mengemas kini paparan secara automatik. Tetapi apabila mengubah suai data objek, kita perlu menggunakan kaedah Vue.set atau Vue.$set yang disediakan oleh Vue untuk mencapai kemas kini data responsif.

Penggunaan Vue.set dan Vue.$set adalah konsisten. Sasaran Vue.set(sasaran, kunci, nilai) ialah objek yang ingin anda ubah suai, kunci ialah objek sebagai nama atribut dan nilai ialah nilai atribut. Apabila menggunakan Vue.set, Vue akan menambah atribut baharu pada objek, yang dinamakan kunci dan nilainya ialah nilai.

Vue.$set(target, key, value) juga digunakan untuk mengubah suai nilai atribut objek, tetapi perbezaan antara Vue.$set dan Vue.set ialah Vue.$set akan menentukan sama ada objek adalah tindak balas Jika ia tidak responsif, Vue.$set akan menukar objek kepada objek responsif. Ini memastikan bahawa objek boleh mencetuskan kemas kini paparan secara normal.

Perlu diambil perhatian bahawa apabila kami mengubah suai data objek, jika kami terus menggunakan obj.property = nilai untuk mengubah suainya, Vue tidak akan mengesan perubahan dalam data ini dan tidak akan mencetuskan kemas kini paparan. Oleh itu, apabila mengubah suai data jenis objek, pastikan anda menggunakan kaedah Vue.set atau Vue.$set untuk berbuat demikian.

Atas ialah kandungan terperinci Prinsip data responsif Vue dan perbezaan antara Vue.set dan Vue.$set. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!