使用 v-for 与 HTML/JavaScript 逻辑嵌套 Vue 组件？答案

【问题标题】：Nesting Vue components with v-for versus HTML/JavaScript logic?使用 v-for 与 HTML/JavaScript 逻辑嵌套 Vue 组件？
【发布时间】：2019-05-18 08:19:12
【问题描述】：

我有这个v-for 循环：

<truchet-tile v-for="tile in tiles" v-bind:key="tile.id" :id="tile.id" :ttype="tile.ttype">
  </truchet-tile>

我想将<div> 标签放在每个 row 磁贴周围，这样行就不会像现在这样内联：

我可以创建一个名为 rowOfTiles 的新 Vue 组件，并在其上循环使用嵌套的 v-for 用于每一行中的 tile 组件。

是否可以改为使用 HTML 和 JavaScript不使用 DOM 方法将简单的嵌套循环逻辑应用于瓦片和瓦片行。像这样的东西：
如果是这样，在这种情况下，是倾向于创建额外的 Vue 组件，还是倾向于寻找在“模型”端处理数据的方法更好？（例如，创建新的 Vue 组件类的性能成本有多大？）

这里是 JSFiddle：https://jsfiddle.net/facechomp/hmLae5c8/6/

【问题讨论】：

我有一个大型 SPA，其中包含数百个使用 webpack 构建的组件，而且速度非常快。我不是 100% 确定您的问题是什么，您可以轻松地对这两种方法进行基准测试，但是，我认为您会发现它们无关紧要。通过在组件中创建清晰的关注点分离有很多好处，代码的清晰可读性以及在应用程序中的不同位置重用的潜力。我还认为让你所有的 const 反应并在安装之前执行该逻辑会更符合 VUE 最佳实践jsfiddle.net/timwickstrom/eqmdt8h0/8
@TimWickstrom.com 谢谢。甚至可以使用 HTML 和 JS（我上面的问题 #1）。

标签： vue.js vue-component reactive-programming

【解决方案1】：

既然您有一行瓦片的概念，那么您的数据中应该有一行瓦片。然后在模板中迭代它们就很简单了。

你的初始化可以是

for (let y = 0; y < height; y++) {
  vm.tiles.push([]);
  for (let x = 0; x < width; x++) {
    // Vue tile component handles reactivity here:
    vm.tiles[y].push({
      id: id,
      ttype: Math.round(Math.random() * 6) // random tile
    });
    id++;
  }
}

你的模板会有类似的东西

  <div v-for="row in tiles">
    <truchet-tile v-for="tile in row" v-bind:key="tile.id" :id="tile.id" :ttype="tile.ttype">
    </truchet-tile>
  </div>

Updated fiddle

【讨论】：