2.4.2
https://jsbin.com/qejofexedo/edit?html , js, keluaran
lihat tautan reproduksi.
Saat saya mengklik Expand is True
, lalu expand
menjadi false
. Dan hanya countA
berubah.
Ketika saya mengklik Expand is Ture
, tidak terjadi apa-apa.
countA
dan countB
berubah.
Saya kira ketika saya mengklik, expand
berubah menjadi false
, tetapi peristiwa klik segera terpicu. Ini menjalankan acara klik vnode lain. Kemudian luaskan diubah menjadi true
.
p
, section
, tidak ada kesalahan yang terjadi.i
tag ke induk div
tag di div pertama, tidak ada kesalahan yang terjadi
terlihat normal
Repro Anda berfungsi sebagaimana mestinya ...
@Kingwl @ yyx990803 Maaf tentang itu. Saya menguji kasus lain dan lupa mengganti kembali.
Kode penting adalah
<div class="header" v-if="expand"> // block 1
<i @click="expand = false, countA++">Expand is True</i> // element 1
</div>
<div class="expand" v-if="!expand" @click="expand = true, countB++"> // block 2
<i>Expand is False</i> // element 2
</div>
Ada empat kasus:
block 1
dan block2
, berfungsi dengan baikelement 1
dan element 2
, berfungsi dengan baikblock 1
dan element 2
, ubah expand
menjadi true ok. Tapi tidak bisa berubah kembali.element 1
dan block 2
, tidak dapat mengubah expand
menjadi false. Tetapi dapat mengubah expand
menjadi true.Jadi, ini terjadi karena:
<i>
diaktifkan, memicu pembaruan pertama pada nextTick (tugas mikro)Ini cukup rumit dalam memperbaikinya, dan libs lain yang memanfaatkan microtask untuk antrian pembaruan juga mengalami masalah ini (mis. Preact). React sepertinya tidak mengalami masalah ini karena mereka menggunakan sistem event sintetis (mungkin karena kasus edge seperti ini).
Untuk mengatasinya, Anda cukup memberikan dua div luar kunci yang berbeda untuk memaksa mereka diganti selama pembaruan. Ini akan mencegah acara yang menggelegak diambil:
<div class="header" v-if="expand" key="1"> // block 1
<i @click="expand = false, countA++">Expand is True</i> // element 1
</div>
<div class="expand" v-if="!expand" @click="expand = true, countB++" key="2"> // block 2
<i>Expand is False</i> // element 2
</div>
Komentar yang paling membantu
Jadi, ini terjadi karena:
<i>
diaktifkan, memicu pembaruan pertama pada nextTick (tugas mikro)Ini cukup rumit dalam memperbaikinya, dan libs lain yang memanfaatkan microtask untuk antrian pembaruan juga mengalami masalah ini (mis. Preact). React sepertinya tidak mengalami masalah ini karena mereka menggunakan sistem event sintetis (mungkin karena kasus edge seperti ini).
Untuk mengatasinya, Anda cukup memberikan dua div luar kunci yang berbeda untuk memaksa mereka diganti selama pembaruan. Ini akan mencegah acara yang menggelegak diambil: