Vue: Pengikatan direktif kustom berbeda pada komponen vs elemen

Dibuat pada 15 Apr 2019 · 6Komentar · Sumber: vuejs/vue

Versi: kapan

2.6.10

Tautan reproduksi

https://jsfiddle.net/bponomarenko/uom10qd2/

Langkah-langkah untuk mereproduksi

Buka konsol browser.
Klik tombol Toggle dua kali.

Apa yang diharapkan?

Directive akan memancarkan pesan konsol yang sama ketika diterapkan ke elemen DOM dan komponen (di init dan setelah klik tombol).

Saya tidak yakin apa yang harus diharapkan keluaran. Antara

bind: first comp
bind: first elem
unbind: first comp
unbind: first elem
bind: first comp
bind: first elem

atau

bind: first comp
bind: first elem
unbind: second comp
unbind: second elem
bind: first comp
bind: first elem

Apa yang sebenarnya terjadi?

Pesan dari direktif sama di init, tetapi berbeda setelah tombol diklik.

Output konsol sebenarnya:

bind: first comp
bind: first elem
unbind: first comp
unbind: second elem
bind: second comp
bind: first elem

Tampaknya urutan penerapan arahan ke elemen dan komponen DOM berbeda. Dalam penyiapan saya, saya memiliki arahan khusus yang bergantung pada beberapa atribut DOM dengan data konfigurasi. Saat perintah khusus ini terikat / tidak terikat dalam "aliran reguler" - semuanya berfungsi seperti yang diharapkan (ikatan direktif setelah atribut elemen diperbarui). Namun ketika direktif terikat / tidak terikat dalam kasus Vue "strategi tambalan di tempat", perilaku tampaknya berbeda.

bug has workaround

Sumber

bponomarenko

Komentar yang paling membantu

Sepertinya direktif dipanggil dengan komponen lama (karena digunakan kembali) tetapi masih memiliki attrs lama

Sebagai solusinya, tetapkan kunci di salah satu komponen

posva pada 15 Apr 2019

👍2 🚀1

Semua 6 komentar

Sepertinya direktif dipanggil dengan komponen lama (karena digunakan kembali) tetapi masih memiliki attrs lama

Sebagai solusinya, tetapkan kunci di salah satu komponen

posva pada 15 Apr 2019

👍2 🚀1

@bponomarenko
Apa yang dikatakan @posva sudah tercakup dalam dokumentasi.
Anda bisa merujuk ke ini.

https://vuejs.org/v2/guide/conditional.html#Controlling -Reusable-Elements-with-key

pistis pada 15 Apr 2019

@posva @pistis Terima kasih atas jawabannya. Ya, itulah yang akhirnya kami gunakan sebagai solusi, saya harus menyebutkannya di tiket. Namun kehadiran atribut key tidak akan memungkinkan untuk menggunakan pengoptimalan rendering Vue.js. Akan sangat bagus untuk memperbaikinya.

bponomarenko pada 16 Apr 2019

Pengoptimalan didasarkan pada bahwa Anda memiliki elemen stateless sehingga Vue tidak perlu repot-repot mengelola event handler atau status lokal dengan benar saat mencoba menggunakan kembali sebuah elemen. Jadi menurut saya ini bukan bug tetapi berpotensi diperbaiki di dokumen kami sehingga pengguna kami dapat memahaminya dengan lebih mudah.

Justineo pada 16 Apr 2019

@Justineo Saya memahami konsep di balik pengoptimalan itu sendiri. Dalam situasi saya, perintah kustom bertanggung jawab untuk menambahkan atribut state ke elemen pada bind dan menghapus atribut itu pada unbind . Dan direktif ditambahkan / dihapus dengan sempurna ketika komponen digunakan kembali oleh Vue.js. Namun urutan pembaruan properti komponen dan inisialisasi direktif berbeda pada momen berbeda dalam masa pakai komponen, yang membuatnya sulit untuk mengembangkan arahan kustom.
Memang dokumentasi tambahan tentang teknik pengoptimalan ini mungkin bisa membantu, tetapi peristiwa siklus hidup arahan yang tidak konsisten agak merupakan bug untuk diperbaiki menurut saya.

bponomarenko pada 16 Apr 2019

👍1