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

[[333552]]

這是一個(gè)強(qiáng)大的簡化，如果你曾研究過Vue代碼庫的復(fù)雜性，那么你就會(huì)知道這實(shí)際上不是事實(shí)。但是從根本上講，這就是Vue為我們所做的事情。

看一下這個(gè)組件：

<template> 
  <div> 
    <h1>{{ title }}</h1> 
    <p>Some words that describe this thing</p> 
    <button>Clickity click!</button> 
  </div> 
</template> 

下面是用 Javascript 實(shí)現(xiàn)，它做了同樣的事情：

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組件構(gòu)造HTML 方式基本相同。當(dāng)然，這里沒有響應(yīng)性，事件處理或其它一系列功能，但是獲取輸出的 HTML 是同一回事。

如果你從未想過以這種方式考慮組件，那很正常，很多人也沒有。

當(dāng)你開始學(xué)習(xí)Vue時(shí)，會(huì)看到新的語法和所有這些神奇的東西，它們看起來與我們以前接觸過的任何東西都不太一樣。

依靠編程基礎(chǔ)

一旦真正意識(shí)到 Vue 組件實(shí)際上只是函數(shù)，那么我們就可以發(fā)現(xiàn)一些隱藏的知識(shí)點(diǎn)。

我們可以從學(xué)習(xí) Javascript 或任何其他編程語言中學(xué)到的知識(shí)應(yīng)用到 Vue 中。

例如，假設(shè)我們想學(xué)習(xí)如何編寫優(yōu)雅和簡潔的Vue組件。我們可以將所學(xué)到的編寫干凈 Javascript 的知識(shí)應(yīng)用到Vue組件中。比如保持函數(shù)簡小，使用描述性名稱，等等

即使是學(xué)習(xí)類似的框架，如React或Angular，也是非常有用的練習(xí)。

現(xiàn)在讓我們看一個(gè)更詳細(xì)的例子。

以新的視角進(jìn)行重構(gòu)

假設(shè)有以下的一個(gè)組件：

<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內(nèi)部的內(nèi)容變成了一個(gè)新的組件，如下所示：

<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，我們會(huì)用幾乎完全相同的方式來做這些。

下面是一個(gè)使用循環(huán)的例子

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類添加其中。

這已經(jīng)很好了，但是如果還要優(yōu)化代碼，應(yīng)該怎么做呢

我的猜測是，你可能會(huì)把for..of的內(nèi)容帶入一個(gè)新函數(shù)中：

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); 
  } 
} 

如果你將組件看作是一個(gè)函數(shù)，那么對于我們的優(yōu)化會(huì)有更深入的了解。

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

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

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

本文轉(zhuǎn)載自微信公眾號(hào)「****」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系****公眾號(hào)。