[02] Functional Component


Posted by m6fish on 2021-01-07

封面標題: Photo by Rirri on Unsplash

主題

functional component 就是沒有JS區塊的組件,完全只靠 .props 把參數帶入,可以用在分割單純顯示用的資料。
注:需要在template中明確標註 functional

好處是:

  • Faster rendering (渲染更快)
  • Lighter memory usage (使用較少的記憶體)
// functional.vue
<template functional>
    <div>
        <p id="pid">{{props.pid}}</p>
        <p>{{props.sex}}</p>
        <p>{{props.name}}</p>
    </div>
</template>

<style lang="scss" scoped>
#pid {
    background-color: wheat;
}
</style>

總結

當專案越變越肥的時候,就會開始思考該怎麼把code模組化,建立更乾淨的程式碼。 Functional Component 筆者認為可以使用在一些單純顯示資料的整理,像是有很多張說明卡片類型的資料、或者多遊戲的規則說明,就可以把卡片模板獨立出來管理,用來達成:當外在列表變動的時候,不去影響到內層的卡片。


#Vue #vue-pattern







Related Posts

Fetch & Promise

Fetch & Promise

JavaScript 是如何被執行的 (2)?

JavaScript 是如何被執行的 (2)?

[week 1] 版本控制 - Git 概念 & 基本指令

[week 1] 版本控制 - Git 概念 & 基本指令


Comments