不少人不知道 Vue 中的组件就是一个函数！

做者：Michael Thiessen
译者：前端小智
来源：medium

点赞再看，微信搜索 【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

在全部组件之下，组件只是返回一些HTML的函数。

这是一个强大的简化，若是你曾研究过Vue代码库的复杂性，那么你就会知道这实际上不是事实。 可是从根本上讲，这就是Vue为咱们所作的事情。

看一下这个组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Some words that describe this thing</p>
    <button>Clickity click!</button>
  </div>
</template>

下面是用 Javascript 实现，它作了一样的事情：

function component(title) {
  let html = '';

  html += '<div>';
  html += `<h1>${title}</h1>`;
  html += '<p>Some words that describe this thing</p>';
  html += '<button>Clickity click!</button>';
  html += '</div>';

  return html;
}

该代码与Vue组件构造HTML 方式基本相同。 固然，这里没有响应性，事件处理或其它一系列功能，可是获取输出的 HTML 是同一回事。

若是你从未想过以这种方式考虑组件，那很正常，不少人也没有。

当你开始学习Vue时，会看到新的语法和全部这些神奇的东西，它们看起来与咱们之前接触过的任何东西都不太同样。

依靠编程基础

一旦真正意识到 Vue 组件实际上只是函数，那么咱们就能够发现一些隐藏的知识点。

咱们能够从学习 Javascript 或任何其余编程语言中学到的知识应用到 Vue 中。

例如，假设咱们想学习如何编写优雅和简洁的Vue组件。咱们能够将所学到的编写干净 Javascript 的知识应用到Vue组件中。好比保持函数简小，使用描述性名称，等等

即便是学习相似的框架，如React或Angular，也是很是有用的练习。

如今让咱们看一个更详细的例子。

以新的视角进行重构

假设有如下的一个组件：

<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>

若是咱们在写Javascript，咱们会用几乎彻底相同的方式来作这些。

下面是一个使用循环的例子

function goingLoopy() {
  const elements = document.querySelectorAll('.item');

  for (const el of elements) {
    const { width } = el.getBoundingClientRect();
    if (width > 500) {
      el.classList.add('large');
    }
  }
}

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

在这里，咱们使用 DOM 方法获取了类为 item 的全部元素，若是它们大于500px，则将large类添加其中。

这已经很好了，可是若是还要优化代码，应该怎么作呢

个人猜想是，你可能会把for..of的内容带入一个新函数中：

function updateElement(el) {
  const { width } = el.getBoundingClientRect();
  if (width > 500) {
    el.classList.add('large');
  }
}

function goingLoopy() {
  const elements = document.querySelectorAll('.item');

  for (const el of elements) {
    updateElement(el);
  }
}

若是你将组件看做是一个函数，那么对于咱们的优化会有更深刻的了解。

他们一直在你脑海中，你只是没有意识到。

人才们的 【三连】 就是小智不断分享的最大动力，若是本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢你们的观看。

---

来源：https://medium.com/js-dojo/vu...

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

---

交流

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