在所有組件之下，組件只是返回一些HTML的函數。

[[333552]]

這是一個強大的簡化，如果你曾研究過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); 
  } 
} 

如果你將組件看作是一個函數，那么對于我們的優化會有更深入的了解。

他們一直在你腦海中，你只是沒有意識到。

作者：Michael Thiessen 譯者：前端小智 來源：medium

來源：https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713

本文轉載自微信公眾號「****」，可以通過以下二維碼關注。轉載本文請聯系****公眾號。