Rumah > Artikel > hujung hadapan web > Bandingkan arahan Vue v-show dan v-if, dan bincangkan tentang senario penggunaan
Artikel ini membandingkan arahan Vue v-show dan v-if, memperkenalkan perbezaan antara v-show dan v-if, dan bercakap tentang senario penggunaan v-show dan v-if. Saya harap Bermanfaat untuk semua orang!
Dalam vue, kedua-dua v-show dan v-if boleh digunakan Mengawal sama ada elemen dipaparkan pada halaman.
Paparan dan penyembunyian v-show adalah untuk mengendalikan atribut paparan elemen css, jadi apabila menggunakan v-show untuk menyembunyikan elemen, nod dom elemen masih dihidupkan halaman; v-jika Menunjukkan dan menyembunyikan adalah untuk menambah atau memadam keseluruhan elemen dom. [Cadangan berkaitan: tutorial video vuejs]
v-jika penukaran mempunyai proses penyusunan/penyahpasangan separa dan yang dalaman dimusnahkan dan dibina semula dengan betul semasa penukaran proses Mendengar acara dan sub-komponen v-show hanya mengendalikan atribut paparan css.
v-if ialah pemaparan bersyarat benar, yang memastikan pendengar acara dan subkomponen dalam blok bersyarat dimusnahkan dan dibina semula dengan sewajarnya semasa suis. Hanya apabila syarat pemaparan palsu, tiada operasi dilakukan dan ia tidak dipaparkan sehingga ia benar.
Apabila v-show berubah daripada palsu kepada benar, ia tidak akan mencetuskan kitaran hayat komponen Apabila v-jika berubah daripada palsu kepada benar, ia akan mencetuskan komponen sebelumCreate, create, beforeMount, Cangkuk kitaran hayat yang dipasang mencetuskan kaedah beforeDestory dan memusnahkan komponen apabila ia berubah daripada benar kepada palsu.
Dari segi penggunaan prestasi, v-if mempunyai penggunaan pensuisan yang lebih tinggi;
v-if dan v-show boleh mengawal penempatan elemen dom pada halaman Menunjukkan dan menyembunyikan
v-if lebih mahal daripada v-show (operasi langsung menambah dan memadam nod dom Jika anda perlu menukar dengan kerap, gunakan v-). show. Nah, jika keadaan jarang berubah semasa runtime, lebih baik menggunakan v-if
export const vShow: ObjectDirective<VShowElement> = { beforeMount(el, { value }, { transition }) { el._vod = el.style.display === 'none' ? '' : el.style.display if (transition && value) { transition.beforeEnter(el) } else { setDisplay(el, value) } }, mounted(el, { value }, { transition }) { if (transition && value) { transition.enter(el) } }, updated(el, { value, oldValue }, { transition }) { // ... }, beforeUnmount(el, { value }) { setDisplay(el, value) } }
export const transformIf = createStructuralDirectiveTransform( /^(if|else|else-if)$/, (node, dir, context) => { return processIf(node, dir, context, (ifNode, branch, isRoot) => { // ... return () => { if (isRoot) { ifNode.codegenNode = createCodegenNodeForBranch( branch, key, context ) as IfConditionalExpression } else { // attach this branch's codegen node to the v-if root. const parentCondition = getParentCondition(ifNode.codegenNode!) parentCondition.alternate = createCodegenNodeForBranch( branch, key + ifNode.branches.length - 1, context ) } } }) } )
(Belajar perkongsian video: tutorial vuejs、bahagian hadapan web)
Atas ialah kandungan terperinci Bandingkan arahan Vue v-show dan v-if, dan bincangkan tentang senario penggunaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!