封面標題: Photo by Rirri on Unsplash

主題

• vuePattern #Functional Component
• 範例程式
• 專案路徑: views/functionalComponent

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 筆者認為可以使用在一些單純顯示資料的整理，像是有很多張說明卡片類型的資料、或者多遊戲的規則說明，就可以把卡片模板獨立出來管理，用來達成:當外在列表變動的時候，不去影響到內層的卡片。