Apakah perbezaan antara v-if dan v-for dalam vue

Perbezaan antara v-if dan v-for: 1. Fungsi yang berbeza Arahan v-if digunakan untuk memberikan sekeping kandungan secara bersyarat ini hanya akan dipaparkan apabila ungkapan arahan mengembalikan nilai sebenar Rendering; arahan v-for menghasilkan senarai berdasarkan tatasusunan. 2. Keutamaan adalah berbeza v-untuk mempunyai keutamaan yang lebih tinggi daripada v-jika Apabila menilai jika, v-untuk dinilai sebelum v-jika.

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

Pertama sekali, jelas dinyatakan dalam dokumentasi rasmi bahawa v-for dan v-if tidak disyorkan untuk digunakan bersama.

1. Peranan v-if dan v-for

v-if command digunakan untuk memberikan sekeping kandungan secara bersyarat. Kandungan ini hanya akan dipaparkan jika ungkapan arahan mengembalikan nilai sebenar . Arahan

v-for memaparkan senarai berdasarkan tatasusunan . Arahan v-for memerlukan sintaks khas dalam bentuk item in items, dengan item ialah tatasusunan data sumber atau objek, dan item ialah alias bagi elemen tatasusunan yang diulang.

Dalam v-for, adalah disyorkan untuk menetapkan nilai kunci dan memastikan setiap nilai kunci adalah unik, yang memudahkan pengoptimuman algoritma perbezaan .

Perbezaan penggunaan antara keduanya adalah seperti berikut:

<div v-if="isShow" >123</div>
  
<li v-for="item in items" :key="item.id">
  {{ item.label }}
</li>

2 >Sedang digunakan, v-for mempunyai keutamaan yang lebih tinggi daripada v-if

v-if dan v-for adalah kedua-dua arahan dalam sistem templat vue

Disusun dalam templat vue Apabila,

akan menukar sistem arahan menjadi fungsi render boleh laku

Contoh Tulis teg p dan gunakan v-if dan v-for pada masa yang sama

Buat contoh vue dan simpan isShow dan data item

<div id="app">
  <p v-if="isShow" v-for="item in items">
    {{ item.title }}
  </p>
</div>

Kod arahan templat akan dijana dalam fungsi pemaparan dan fungsi pemaparan boleh diperolehi melalui aplikasi.$ options.render

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

_l ialah fungsi pemaparan senarai bagi vue, dan pertimbangan if akan dilakukan di dalam fungsi

Kami pada mulanya membuat kesimpulan: v-for mempunyai keutamaan yang lebih tinggi daripada v -if

ƒ 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) }
}

Kemudian v-for dan v- if diletakkan pada label yang berbeza

dan kemudian fungsi render ialah output

<div id="app">
  <template v-if="isShow">
    <p v-for="item in items">{{item.title}}</p>
  </template>
</div>

Pada masa ini kita dapat melihat bahawa apabila v-for dan v-if bertindak pada label yang berbeza, mereka mula-mula Membuat pertimbangan dan kemudian memberikan senarai

ƒ 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)}
}

Mari kita semak semula kod sumber vue

Lokasi kod sumber: vue- devsrccompilercodegenindex.js

Apabila membuat penghakiman if, v- for diadili sebelum 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
  ...
}

Hasil penghakiman akhir ialah v-for mempunyai keutamaan yang lebih tinggi daripada v-if

3. Langkah berjaga-jaga 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)

Untuk mengelakkan situasi ini, sarang templat di lapisan luar (perenderan halaman tidak menjana nod dom), lakukan penilaian v-jika pada lapisan ini , dan kemudian lakukan gelung v-untuk secara dalaman

Jika keadaan muncul di dalam gelung, anda boleh menapis item yang tidak perlu dipaparkan terlebih dahulu melalui atribut yang dikira

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

Perihalan kes:

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

Sebab: v- untuk mempunyai keutamaan yang lebih tinggi daripada v-jika Ia perlu merentasi keseluruhan tatasusunan setiap kali, menyebabkan pengiraan yang tidak perlu dan menjejaskan prestasi

Contohnya, gunakan v-for untuk menggelungkan 100 li tag dalam halaman, tetapi hanya memaparkan Kandungan tag li dengan index=97 disembunyikan.

Walaupun hanya satu data yang perlu digunakan dalam 100 senarai, ia akan melingkari keseluruhan tatasusunan.

Penyelesaian: Gunakan pengiraan

 <ul>
    <li v-for="item in list" v-if="item.actived">{{item.name}}</li>
 </ul>

[Cadangan berkaitan:

tutorial video vuejs

<ul>
    <li v-for="item in activeList">{{item.name}}</li>
</ul>

computed: {
  activeList() {
    return this.list.filter(val => {
      return val.actived;
    });
  }
},

,

pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah perbezaan antara v-if dan v-for dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!