关于javascript:一个孤独的孩子我该不该将控制流指令写入通用结构组件中

作者：Michael Thiessen
译者：前端小智
起源：medium

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

控制流指令，如 v-if 和v-for，如果在较大我的项目中，就很有可能会创立一些难以浏览的嵌套代码。如果在 v-if 内嵌套了v-for，刚这个特色就更显著了。

为了程序员的头发着想，我心愿大家不要编写具备多级嵌套代码。

然而，如果你偏要这么干，那么送你一个技巧，能够以轻松地将这些噩梦转变成童话故事。

当嵌套开始变多时，如果我还想要放弃整洁，我的默认做法是将代码提取到一个新组件中。

应用 v-for 和v-if，咱们把指令中的所有货色都转换成它本人的组件。

举个例子来看看，咱们从这个有嵌套的模板开始

<template>
  <div>
    <h1>{{title}}</h2>
    <div class="navigation">
      <!-- ... -->
    </div>

    <div v-for="item in list">
      <h2 class="item-title">
        {{item.title}}
      </h2>
      <p class="item-description">
        {{item.description}}
      </p>
    </div>

    <footer>
      <!-- ... -->
    </footer>
  </div>
</template>

接着，咱们把 v-for 外面的内容提取到一个新的组件中：

<template>
  <div>
    <h2 class="item-title">
      {{item.title}}
    </h2>
    <p class="item-description">
      {{item.description}}
    </p>
  </div>
</template>

如果咱们导入这个新组件，咱们会看到它很好地解脱了所有嵌套:

<template>
  <div>
    <h1>{{title}}</h2>
    <div class="navigation">
      <!-- ... -->
    </div>

    <ListItem
      v-for="item in list"
      :item="item"
    />

    <footer>
      <!-- ... -->
    </footer>
  </div>
</template>

此示例中没有太多的嵌套，所以独自为一小部分内容做一个组件，有点繁琐。然而，如果咱们有两个，三个或更多的嵌套级别，则此技巧能够打消嵌套构造并让代码更易于了解。

但这里有一个问题: 为什么咱们不把 v-for 指令也写入新的组件中？

假如，咱们下面的 v-for 放到新的组件内，则咱们会失去上面的构造：

<template>
  <div>
    <h1>{{title}}</h2>
    <div class="navigation">
      <!-- ... -->
    </div>

    <List :list="list" />

    <footer>
      <!-- ... -->
    </footer>
  </div>
</template>

这样看上去，父组件的确清晰很多。但可怜的是，这种变向的把复杂度放到了子组件中：

<template>
  <div>
    <div v-for="item in list">
      <h2 class="item-title">
        {{item.title}}
      </h2>
      <p class="item-description">
        {{item.description}}
      </p>
    </div>
  </div>
</template>

哪种形式更好？

如果你最终的目标就是想缩小嵌套数量，那么这个抉择必定更蹩脚。咱们在子组件中增加了额定的嵌套级别，而没有缩小父组件中的嵌套级别。

通常，我会防止将诸如 v-if 和v-for之类的控制流指令放在这样的组件的根部，因为它会影响可重用性。

如果只须要一个简略ListItem 该怎么办？

假如应用v-if，如果要应用不同的逻辑在组件之间进行切换，或者要应用齐全不同的组件怎么办？

将控制流指令写小最小通用构造的组件中会限度咱们的灵活性，而不会给咱们带来更多的便利性。因而，我偏向于将控制流指令留在这样的小组件之外。我还尝试防止将它们放在组件的根部。

一旦你深刻理解“底层”的状况，此问题及其解决方案就会显得更加有劣势。

https://www.digitalocean.com/…