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