关于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/...