vue では v-if と v-for のどちらが優先されますか?

vue2 では、v-for は v-if よりも高い優先順位を持ち、vue3 では、v-if は v-for よりも高い優先順位を持ちます。 vue では、同じ要素に対して v-if と v-for を同時に使用しないでください。これにより、パフォーマンスが無駄になります (各レンダリングが最初にループし、次に条件判断が実行されます)。この状況を回避したい場合は、テンプレートを使用してください。外側の層にネストすることができます (ページのレンダリングでは DOM ノードは生成されません)。この層で v-if 判定が実行され、内部で v-for ループが実行されます。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

v-if ディレクティブは、コンテンツを条件付きでレンダリングするために使用されます。ディレクティブは、コンテンツのブロックを条件付きでレンダリングするために使用されます。このコンテンツは、ディレクティブの式が true を返した場合にのみ表示されます。
v-for ディレクティブは、配列に基づいてリストをレンダリングします。 v-for ディレクティブには、item in items の形式の特別な構文が必要です。items はソース データ配列またはオブジェクト、item は、反復される配列要素のエイリアスです。

v-for の場合は、key 値を設定し、各 key 値が一意であることを確認することをお勧めします。これは ## です。 #diffアルゴリズムの最適化。 <pre class="brush:php;toolbar:false">&lt;modal&gt;&lt;/modal&gt; </pre> <li>     {{ item.label }} </li>

優先順位実際、vue2 と vue3 の答えは完全に逆です。

vue2 では、v-for は v-if よりも高い優先順位を持ちます。
vue3 では、v-if は v での優先順位が高くなります。 -for

## v-for および v-if

vue2 v-if

と

v-for はどちらも vue テンプレート システムのディレクティブです。 vue

テンプレートがコンパイルされると、コマンド システムは実行可能な

render 関数に変換されます。 p

タグを記述し、

v-if と v-for

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

を使用して vue を作成します例:

isShow および items データを保存します。

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 は

vue のリスト描画関数であり、関数内で if の判定が行われます。 暫定的な結論: v-for は
v-if よりも優先されます。 次に、v-for と
v-if を異なるラベル

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

に配置し、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)}
}

を出力します。 現時点では、v-for と

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
    ...
}

if の判定を行う場合、

v-if よりも先に v-for が判定されます。 最後に、v-for

は

v-if よりも優先されます。 vue3 の v-for と v-if

#vue3 では、v-if は v-fo よりも優先度が高いため、v-if が実行されると、呼び出す変数はまだ存在しないため、例外が発生します

説明:

これを行う原因となる状況は通常 2 つあります:

1.

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

のようなリストのプロジェクトをフィルタリングします:

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

vue2 でそれらをまとめます。出力レンダリング関数から、ループが最初に実行され、その後条件が判断されることがわかります。たとえリスト要素のごく一部だけをレンダリングしたとしても、再レンダリングするたびにリスト全体を走査する必要があり、無駄が生じます。
• vue3 では、v-if は v- よりも高い優先順位を持っています。 fo なので、v-if が実行されると、変数がまだ存在しないため、例外が発生します。

この時点で、計算されたプロパティ (

activeUsers## など) を定義します。 #) を実行し、フィルタリングされたリスト ( users.filter(u=>u.isActive) など) を返します。 2. 非表示にする必要があるリストのレンダリングを避けるために、

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

同様に、vue2 でもそれらをまとめると、出力レンダリング関数からわかります。最初にLoopを実行してから条件を判断することになりますが、たとえリスト内の要素の一部だけをレンダリングしたとしても、再レンダリングするたびにリスト全体を走査する必要があり、無駄が生じます。 #vue3 では、このように書いてもエラーは報告されませんが、公式はこれを外部で行うことをまだ推奨していません

• 現時点では、
• v-if
をコンテナに移動します要素 (

ul

、ol など) を使用するか、外側に template のレイヤーをラップします。 注

同じ要素に対して v-if と v-for を同時に使用しないでください。パフォーマンスが無駄になります。 (各レンダリングは最初にループし、次に条件判断を実行します)

この状況を回避したい場合は、テンプレートを外側の層にネストします (ページのレンダリングでは dom ノードが生成されません)。この層 v-if 判定を行い、内部で v-for ループを実行します。

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

ループ内に条件が出現した場合、該当するものを除外できます。計算された属性を通じて事前に表示される項目

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

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

以上がvue では v-if と v-for のどちらが優先されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。