很多人不知道-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。