Yang manakah mempunyai keutamaan yang lebih tinggi, v-jika atau v-untuk dalam vue?

Dalam vue2, v-for mempunyai keutamaan yang lebih tinggi daripada v-if dalam vue3, v-if mempunyai keutamaan yang lebih tinggi daripada v-for. Dalam Vue, jangan sekali-kali menggunakan v-if dan v-for pada elemen yang sama pada masa yang sama, yang akan menyebabkan pembaziran prestasi (setiap rendering akan gelung dahulu dan kemudian melakukan pertimbangan bersyarat jika anda ingin mengelakkan situasi ini, Templat boleh bersarang di lapisan luar (penyampaian halaman tidak menjana nod DOM), v-jika penilaian dilakukan pada lapisan ini, dan kemudian gelung v-untuk dilakukan secara dalaman.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3. Arahan

v-if digunakan untuk memberikan blok kandungan secara bersyarat. Arahan digunakan untuk menghasilkan blok kandungan secara bersyarat. Kandungan ini hanya akan dipaparkan jika ungkapan arahan itu kembali benar. Arahan
v-for memaparkan senarai berdasarkan tatasusunan. Arahan v-for memerlukan sintaks khas dalam bentuk item in items, dengan items ialah tatasusunan data sumber atau objek dan item ialah alias bagi elemen tatasusunan yang diulang. Apabila

berada dalam v-for, disyorkan untuk menetapkan nilai key dan memastikan setiap nilai key adalah unik. Ini ialah algoritma diff untuk pengoptimuman.

<modal></modal>

    {{ item.label }}

Keutamaan

Malah, jawapan dalam vue2 dan vue3 adalah bertentangan sama sekali.

• Dalam vue2, v-for mempunyai keutamaan yang lebih tinggi daripada v-if

• Dalam vue3, v-if mempunyai keutamaan yang lebih tinggi Dalam v -untuk

v-untuk dan v-jika

v-if dalam vue2 dan v-for ialah kedua-dua arahan dalam sistem templat vue.

Apabila templat vue disusun, sistem arahan akan ditukar menjadi fungsi render boleh laku.

Tulis teg p, gunakan kedua-dua v-if dan v-for

<div>
    <p>
        {{ item.title }}
    </p>
</div>

untuk membuat contoh vue dan simpan isShow dan items data.

const app = new Vue({
  el: "#app",
  data() {
    return {
      items: [
        { title: "foo" },
        { title: "baz" }]
    }
  },
  computed: {
    isShow() {
      return this.items && this.items.length > 0
    }
  }
})

ƒ anonymous() {
  with (this) { return 
    _c('div', { attrs: { "id": "app" } }, 
    _l((items), function (item) 
    { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

_l ialah fungsi pemaparan senarai vue dan if penghakiman akan dilakukan di dalam fungsi tersebut.
Kesimpulan awal: v-for mempunyai keutamaan yang lebih tinggi daripada v-if.
Kemudian letakkan v-for dan v-if dalam tag yang berbeza

<div>
    <template>
        <p>{{item.title}}</p>
    </template>
</div>

dan kemudian keluarkan fungsi render

ƒ anonymous() {
  with(this){return 
    _c('div',{attrs:{"id":"app"}},
    [(isShow)?[_v("\n"),
    _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}

Pada masa ini kita dapat lihat, dan v-for digunakan pada teg yang berbeza, ia dinilai terlebih dahulu dan kemudian senarai itu diberikan. v-if

export function genElement (el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre
  }
  if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    return genSlot(el, state)
  } else {
    // component or element
    ...
}

Apabila membuat penghakiman

, if dihakimi sebelum v-for. v-if

Akhirnya

mempunyai keutamaan yang lebih tinggi daripada v-for. v-if

v-for dan v-if dalam vue3

Dalam vue3, v-if mempunyai keutamaan yang lebih tinggi daripada v-fo, jadi apabila v-if dilaksanakan , pembolehubah yang dipanggilnya belum wujud lagi, ia akan menyebabkan pengecualian

Penjelasan: Biasanya terdapat dua situasi yang menyebabkan kita melakukan ini:

1 untuk menapis senarai Projek, seperti:

v-for="user in users" v-if="user.isActive"

Dalam vue2, letakkan mereka bersama-sama Ia boleh dilihat daripada fungsi pemaparan output bahawa gelung akan dilaksanakan dahulu dan kemudian keadaannya dinilai, walaupun kami hanya memberikan satu item dalam senarai Untuk sebilangan kecil elemen, keseluruhan senarai mesti dilalui setiap kali ia dipaparkan semula, yang akan membazir
• Dalam vue3, v-if mempunyai keutamaan yang lebih tinggi daripada v-fo, jadi apabila v-if dilaksanakan, Pembolehubah yang dipanggilnya belum wujud lagi, yang akan menyebabkan pengecualian

Pada masa ini, tentukan atribut yang dikira (seperti

) dan biarkan ia mengembalikan senarai yang ditapis (seperti activeUsers). users.filter(u=>u.isActive)

2. Untuk mengelak daripada memaparkan senarai yang sepatutnya disembunyikan

v-for="user in users" v-if="shouldShowUsers"

Begitu juga, dalam vue2, letakkannya bersama-sama, dan ia boleh dilihat daripada fungsi pemaparan output yang Jalankan gelung dahulu dan kemudian nilai syarat Walaupun kita hanya memberikan sebahagian kecil daripada elemen dalam senarai, kita perlu melintasi keseluruhan senarai setiap kali ia dipaparkan semula, yang akan membazir
• Dalam vue3, bukan mudah untuk menulis seperti ini Ralat akan dilaporkan, tetapi pegawai masih tidak mengesyorkan melakukan ini di luar

Pada masa ini, alihkan

ke elemen kontena. (seperti v-if, ul) atau balut dengan lapisanolItu sahaja. template

Nota

Jangan sekali-kali menggunakan v-if dan v-for pada elemen yang sama pada masa yang sama, yang akan menyebabkan pembaziran prestasi (Setiap pemaparan akan gelung dahulu dan kemudian melakukan pertimbangan bersyarat)

• Jika anda mengelak situasi ini, sarang templat di lapisan luar (perenderan halaman tidak menjana nod dom), dalam lapisan ini Buat pertimbangan v-jika, dan kemudian lakukan gelung v-untuk di dalam

<template v-if="isShow">
    <p v-for="item in items">
</template>

• Jika keadaan muncul di dalam gelung, ia boleh ditapis terlebih dahulu melalui atribut terkira Item yang tidak perlu dipaparkan

computed: {
    items: function() {
      return this.list.filter(function (item) {
        return item.isShow
      })
    }
}

【相关视频教程推荐：vuejs入门教程、web前端入门】

Atas ialah kandungan terperinci Yang manakah mempunyai keutamaan yang lebih tinggi, v-jika atau v-untuk dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!