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!

1 Perbezaan antara v-show dan v-if

• 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;

2. Senario penggunaan v-show dan v-if

• 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

3 Analisis prinsip v-show dan v-if

• Tidak kira sama ada v-show adalah benar atau salah, elemen akan sentiasa dipaparkan dalam kod sumber, jika elemen yang terikat pada arahan v-show mempunyai peralihan yang bersarang di lapisan luar, peralihan akan. dilaksanakan. Jika tiada peralihan bersarang dalam lapisan luar el, , tetapkan el.style.display

export const vShow: ObjectDirective<VShowElement> = {
  beforeMount(el, { value }, { transition }) {
    el._vod = el.style.display === &#39;none&#39; ? &#39;&#39; : 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)
  }
}

• v-jika diperoleh untuk penghakiman apabila sintaks abstrak pokok ditukar kepada rentetan kod Jika v-jika Jika palsu, vnod yang dijana oleh fungsi pemaparan tidak akan mengandungi nod yang akan diberikan, tetapi nod vnod beranotasi sebagai pemegang tempat

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!