ホームページ > 記事 > ウェブフロントエンド > Vue の v-if と v-for の違いは何ですか
#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。 まず、公式ドキュメントには v-for と v-if の併用は推奨されないことが明記されています。v-if と v-for の違い: 1. 異なる関数。v-if 命令は、コンテンツの一部を条件付きでレンダリングするために使用されます。このコンテンツは、命令は true 値を返します レンダリング; v-for ディレクティブは、配列に基づいてリストをレンダリングします。 2. 優先順位が異なる v-for の方が v-if よりも優先され、if 判定の場合は v-if よりも先に v-for が判定されます。
は、コンテンツの一部を条件付きでレンダリングするために使用されます 。このコンテンツは、ディレクティブ の式が true 値を返した場合にのみ 表示されます。
v-for ディレクティブは、 配列に基づいてリスト をレンダリングします。 v-for ディレクティブには、item in items という形式の特別な構文が必要です。ここで、items はソース データ配列またはオブジェクトであり、item は反復される配列要素のエイリアスです。
キー値 を設定し、各キー値が一意であることを確認することをお勧めします。これにより、 diff アルゴリズムの最適化が容易になります 。
この 2 つの使用法の違いは次のとおりです:<div v-if="isShow" >123</div> <li v-for="item in items" :key="item.id"> {{ item.label }} </li>
使用中、v-for は v-if よりも優先されます
v-if と v-for はどちらも vue テンプレート システムの命令ですvue テンプレートの場合がコンパイルされると、コマンド システムが実行可能なレンダリング関数に変換されます
例 p タグを記述し、v-if および v-for
<div id="app"> <p v-if="isShow" v-for="item in items"> {{ item.title }} </p> </div>を使用してvue インスタンスでは、isShow と項目 data
const app = new Vue({ el: "#app", data() { return { items: [ { title: "foo" }, { title: "baz" }] } }, computed: { isShow() { return this.items && this.items.length > 0 } } })template 命令を格納するためのコードが render 関数で生成され、レンダリング関数は app.$options.render
ƒ 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 よりも優先度が高いということです
<div id="app"> <template v-if="isShow"> <p v-for="item in items">{{item.title}}</p> </template> </div>次に、レンダリング関数を出力します
ƒ 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 が異なるタグに作用する場合、最初に判定され、次に判定されることがわかります。リストが表示されますもう一度vueのソースコードを確認してみましょう
ソースコードの場所:\vue-dev\src\compiler\codegen\index.js
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-for は v-If よりも優れています。最終的な判定結果は、v-for が v-if よりも優先されるということです。
これを回避する場合 この場合、テンプレートは外層にネストされており(ページレンダリングではdomノードは生成されません)、この層でv-if判定が行われ、内部でv-forループが行われます
<template v-if="isShow"> <p v-for="item in items"> </template>
条件がループ内に表示される場合は、計算された属性を通じて事前に表示する必要のない項目を除外できます。
computed: { items: function() { return this.list.filter(function (item) { return item.isShow }) } }ケースの説明:
理由: v-for は v-if よりも優先されます。毎回配列全体を走査する必要があるため、不要な計算が発生し、パフォーマンスに影響します。
たとえば、v-for を使用してループします。ページ上に 100 個の li タグがありますが、index=97 の li タグのコンテンツのみが表示され、残りはすべて非表示になります。
100 個のリストで 1 つのデータのみを使用する必要がある場合でも、配列全体をループします。ff6d136ddc5fdfeffaf53ff6ee95f185 04a018f18083b7a83936d439c5c53c8b{{item.name}}bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
<ul> <li v-for="item in activeList">{{item.name}}</li> </ul> computed: { activeList() { return this.list.filter(val => { return val.actived; }); } },
[関連する推奨事項:
vuejs ビデオ チュートリアル以上がVue の v-if と v-for の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。