【譯】Vue 的小奇技（第十一篇）：高效簡潔的函式式元件

• 原文地址：Simple and performant functional Vue.js components

• 原文作者：Alex Jover

• 譯者：程式猿何大叔

特別宣告：本文是作者 Alex Jover 釋出在 VueDose 上的一個系列。

版權歸作者所有。

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。

為了不影響大家閱讀，獲得授權的記錄會放在本文的最後。

正文

有時候，我們不需要複雜的元件，甚至在一些場景下，我們不需要那些元件保持自己的狀態。比如說構建那些內部不需要太多邏輯的 UI 元件。

像這樣的情況，函式式元件實在是再合適不過了。這種元件自身是無狀態的、無例項的，這就意味著它獲取不到自身的例項，因此無法呼叫 this.$emit 等例項方法。

這也就很容易說明了，這些元件更高效、更輕量。

剩下的問題就是，我該什麼時候去使用函式式元件？很簡單，就當元件僅依賴於 props 時。

舉個例子：

<template>
  <div>
    <p v-for="item in items" @click="$emit('item-clicked', item)">
      {{ item }}
    </p>
  </div>
</template>

<script>
  export default {
    props: ["items"]
  };
</script>
複製程式碼

就可以被寫成如下函式式元件：

<template functional>
  <div>
    <p v-for="item in props.items" @click="props.itemClick(item);">
      {{ item }}
    </p>
  </div>
</template>
複製程式碼

要注意下面這些改動事項：

• 在 template 標籤上追加一個 functional 屬性。
• 通過 props 屬性，父元件傳入的 props 可以被訪問到。
• 由於我們無法訪問到例項的方法 $emit，我們可以使用 props 中的一個函式進行觸發事件；React 社群就總是這麼做的，而且做得很好。
• 單檔案元件中的 script 部分就不需要了。

你想看看在實踐中怎麼使用嗎？上 CodeSandbox 看看這個 例子 吧！

你可以線上閱讀這篇 原文，裡面有可供複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！

結語

此係列的其他文章，會同步系列官網的釋出情況，及時地翻譯釋出到掘金。請持續關注「程式猿何大叔」，相信我會給大家帶來更多優質的內容，不要忘了點贊~

如果想要了解譯者的更多，請查閱如下：

• 個人部落格：blog.hadesz.com
• 個人 github 倉庫：github.com/hadeshe93
• 個人微信公眾號：搜尋「程式猿何大叔」

請求翻譯授權記錄

---

覺得本文不錯的話，分享一下給小夥伴吧~