Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

<モーダル v-if="isShow" />
 
<li v-for="item in items" :key="item.id">
  {{item.label}}
</li>

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

constアプリ = 新しいVue({
 el: "#app",
 データ（） {
  戻る {
   アイテム: [
    { タイトル: "foo" },
    { タイトル: "バズ" }]
  }
 },
 計算: {
  isShow() {
   this.items && this.items.length > 0 を返します
  }
 }
})

ƒ 匿名() {
 （これ）{戻り 
  _c('div', { 属性: { "id": "app" } }, 
  _l((アイテム), 関数(アイテム) 
  { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

<div id="アプリ">
  <テンプレートv-if="isShow">
    <p v-for="item in items">{{item.title}}</p>
  </テンプレート>
</div>

ƒ 匿名() {
 (これ){戻り 
  _c('div',{attrs:{"id":"app"}},
  [(isShow)?[_v("\n"),
  _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}

エクスポート関数genElement（el：ASTElement、状態：CodegenState）：文字列{
 el.parentの場合{
  el.pre = el.pre || el.parent.pre
 }
 el.staticRoot の場合、 el.staticProcessed の場合、
  genStatic(el, state) を返す
 } そうでない場合 (el.once && !el.onceProcessed) {
  genOnce(el, state) を返す
 } そうでない場合 (el.for && !el.forProcessed) {
  genFor(el, state) を返す
 } そうでない場合 (el.if && !el.ifProcessed) {
  genIf(el, state) を返す
 } そうでない場合 (el.tag === 'template' && !el.slotTarget && !state.pre) {
  genChildren(el, state) を返します || 'void 0'
 } そうでない場合 (el.tag === 'スロット') {
  genSlot(el, state) を返す
 } それ以外 {
  //コンポーネントまたは要素
  ...
}

<テンプレートv-if="isShow">
  <p v-for="item in items">
</テンプレート>

計算: {
  アイテム: 関数() {
   this.list.filter(function (item) { を返します
    item.isShowを返す
   })
  }
}