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

作者:Michael Thiessen
译者:前端小智
来源:medium
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

控制流指令,如v-ifv-for,如果在较大项目中,就很有可能会创建一些难以阅读的嵌套代码。如果在v-if内嵌套了v-for ,刚这个特征就更明显了。

为了程序员的头发着想,我希望大家不要编写具有多级嵌套代码。

但是,如果你偏要这么干,那么送你一个技巧,可以以轻松地将这些噩梦转变成童话故事。

一个孤独的子组件

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

使用v-forv-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-ifv-for之类的控制流指令放在这样的组件的根部,因为它会影响可重用性。

如果只需要一个简单ListItem 该怎么办?

假设使用v-if,如果要使用不同的逻辑在组件之间进行切换,或者要使用完全不同的组件怎么办?

将控制流指令写小最小通用结构的组件中会限制我们的灵活性,而不会给我们带来更多的便利性。 因此,我倾向于将控制流指令留在这样的小组件之外。 我还尝试避免将它们放在组件的根部。

一旦你深入了解“底层”的情况,此问题及其解决方案就会显得更加有优势。

https://www.digitalocean.com/...

作者:Michael Thiessen
译者:前端小智
来源:medium
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

控制流指令,如v-ifv-for,如果在较大项目中,就很有可能会创建一些难以阅读的嵌套代码。如果在v-if内嵌套了v-for ,刚这个特征就更明显了。

为了程序员的头发着想,我希望大家不要编写具有多级嵌套代码。

但是,如果你偏要这么干,那么送你一个技巧,可以以轻松地将这些噩梦转变成童话故事。

一个孤独的子组件

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

使用v-forv-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-ifv-for之类的控制流指令放在这样的组件的根部,因为它会影响可重用性。

如果只需要一个简单ListItem 该怎么办?

假设使用v-if,如果要使用不同的逻辑在组件之间进行切换,或者要使用完全不同的组件怎么办?

将控制流指令写小最小通用结构的组件中会限制我们的灵活性,而不会给我们带来更多的便利性。 因此,我倾向于将控制流指令留在这样的小组件之外。 我还尝试避免将它们放在组件的根部。

一旦你深入了解“底层”的情况,此问题及其解决方案就会显得更加有优势。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://www.digitalocean.com/...


交流

文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。

阅读 304

推荐阅读
终身学习者
用户专栏

我要先坚持分享20年,大家来一起见证吧。

39093 人关注
401 篇文章
专栏主页