在所有元件之下，元件隻是傳回一些HTML的函數。
這是一個強大的簡化，如果你曾研究過Vue代碼庫的複雜性，那麼你就會知道這實際上不是事實。但是從根本上講，這就是Vue為我們所做的事情。
看一下這個元件：
{{ title }}
{{ title }}
Some words that describe this thing
Clickity click!
下面是用 Javascript 實作，它做了同樣的事情：
該代碼與Vue元件構造HTML 方式基本相同。當然，這裡沒有響應性，事件處理或其它一系列功能，但是擷取輸出的 HTML 是同一回事。
如果你從未想過以這種方式考慮元件，那很正常，很多人也沒有。
當你開始學習Vue時，會看到新的文法和所有這些神奇的東西，它們看起來與我們以前接觸過的任何東西都不太一樣。
依靠程式設計基礎
一旦真正意識到 Vue 元件實際上隻是函數，那麼我們就可以發現一些隐藏的知識點。
我們可以從學習 Javascript 或任何其他程式設計語言中學到的知識應用到 Vue 中。
例如，假設我們想學習如何編寫優雅和簡潔的Vue元件。我們可以将所學到的編寫幹淨 Javascript 的知識應用到Vue元件中。比如保持函數簡小，使用描述性名稱，等等
即使是學習類似的架構，如React或Angular，也是非常有用的練習。
現在讓我們看一個更詳細的例子。
以新的視角進行重構
假設有以下的一個元件：
{{ title }}
{{ title }}
"navigation">
"item in list">
"item-title">
{{ item.title }}
"item-title"> {{ item.title }}
"item-description">
{{ item.description }}
為簡化，我們将v-for内部的内容變成了一個新的元件，如下所示：
"item-title">
{{ item.title }}
"item-title"> {{ item.title }}
"item-description">
{{ item.description }}
完成此操作後，我們将其替換為父元件，這使我們擺脫了多餘的嵌套：
{{ title }}
{{ title }}
"navigation">
v-for="item in list"
:item="item"
/>
如果我們在寫Javascript，我們會用幾乎完全相同的方式來做這些。
下面是一個使用循環的例子
function
在這裡，我們使用 DOM 方法擷取了類為
item
的所有元素，如果它們大于
500px
，則将
large
類添加其中。
這已經很好了，但是如果還要優化代碼，應該怎麼做呢
我的猜測是，你可能會把
for..of
的内容帶入一個新函數中：
如果你将元件看作是一個函數，那麼對于我們的優化會有更深入的了解。
他們一直在你腦海中，你隻是沒有意識到。
作者：Michael Thiessen 譯者：前端小智 來源：medium 來源：https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713
相關推薦
最簡單的微前端實作方式【微前端實作的十種方式 】
幾個你不一定知道的超實用網絡狀态屬性
Vue 開發必須知道的 36 個技巧
消息未讀之點不完的小紅點設計思路(Node+Websocket)
使用Canvas實作一個線上發牌遊戲 [純前端、附源碼]
Kbone原了解析，小程式技術該如何選型？
Node.js結合ProtoBuffer,從零實作一個redis!
詳解 ES10 中 Object.fromEntries() 的緣起
JS執行上下文的兩個階段做了些啥？
讓你徹底掌握 TS 枚舉
遇到這些 TS 問題你會頭暈麼？
在 TS 中如何減少重複代碼
用上這幾招，輕松實作 TS 類型提取
TypeScript 期中考試現在開始
前端學習資料結構與算法系列(八)：快速排序與三路快排
前端學習資料結構與算法系列(七)：堆排序與歸并排序
前端學習資料結構與算法系列(六)：選擇排序與插入排序
前端學習資料結構與算法系列(五)：冒泡排序的了解與實作
前端學習資料結構與算法系列(四)：哈希、堆和二叉查找樹
前端學習資料結構與算法系列(三)：棧與隊列的基礎知識
前端學習資料結構與算法系列(二)：連結清單與數組的基礎知識
前端學習資料結構與算法系列(一)：初識資料結構與算法
騰訊文檔原來是這樣用 webpack5 的 Module federation 特性的！
絕大部分的開源項目都投入TypeScript了！你呢？
【收藏系列】JS靈魂之問(下) - 附個人成長經驗分享
【收藏系列】JS靈魂之問, 是否有offer看你接到多少個(中)
【收藏系列】JS靈魂之問, 請問你能接得住幾個？(上)
【JS進階深挖】完全弄懂資料類型轉換(上)
點在看的人特别帥/美