作者：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。