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

阅读 622

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

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

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