Vue - 元件規劃心得

簡介

閱讀patterns.dev內Vue元件相關的設計模式文章，做個筆記記錄一下

Container / Presentational Pattern

其中一種分類原則，就是可以分為Container和Presentational兩個種類
將UI設計和邏輯分離，加強維護性，例如當我想改變按鈕樣式時，不會去影響應用邏輯

1. Presentational Components

重點在於外觀展示
不涉及資料修改
透過props接收資料

2. Container Components

處理功能邏輯，例如：串接API取得資料
或是從Pinia / Vuex這類的全局狀態管理取得資料
使用props傳入資料給Presentational Components

範例：顯示Pokemon卡片

創建展示元件：PokeCard.vue

<script setup>
const { pokemon } = defineProps({
  pokemon: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <ul>
    <li v-for="poke in pokemon" :key="poke.id">
      <p>{{ poke.name }}</p>
      <img :src="poke.sprites.front_default" :alt="poke.name" />
    </li>
  </ul>
</template>

創建Container元件：PokeContainer.vue

<script setup>
  import { ref, onMounted } from "vue";
  const pokemon = ref([])

  onMounted(async () => {
    const response = await fetch('https://pokeapi.co/api/v2/pokemon/ditto')
    const data = await response.json()
    pokemon.value.push(data)
})
</script>
<template>
  <PokeCard :pokemon="pokemon" />
</template>

Demo
Container 元件
取得API資料放入UI元件
UI-展示元件

有什麼優點

職責清晰分離: 通過將UI和業務邏輯分開，提高程式碼的組織性和可維護性
提高重用性和測試便利: 展示元件易於重用和測試，由於它們不包含複雜的業務邏輯
簡化狀態管理: 容器元件集中處理狀態和邏輯，減少跨元件的狀態傳遞和混亂

Vue3 Composition API的影響

開始模糊容器與呈現元件之間的界限
提供更靈活的方式來組織元件和邏輯

Composables

允許封裝和重用狀態和邏輯
同樣可以達到UI畫面和商業邏輯分開處理的目的
就不需要另外寫Container元件

使用Composable改寫：

創建/composables/usePokemonInfos.js

import { ref, onMounted } from 'vue'
export default function usePokemonInfos() {
  const pokemon = ref([])

  onMounted(async () => {
    try {
      const response = await fetch('https://pokeapi.co/api/v2/pokemon/ditto')
      const data = await response.json()
      pokemon.value.push(data)
  } catch (error) {
      console.error(error)
  }
  })

  return { pokemon }
}

在PokeCard.vue從composables取得資料

<script setup>
  import usePokemonInfos from "../composables/usePokemonInfos";

  const { pokemon } = usePokemonInfos();
</script>

<template>
  <ul>
    <li v-for="poke in pokemon" :key="poke.id">
      <p>{{ poke.name }}</p>
      <img :src="poke.sprites.front_default" :alt="poke.name" />
    </li>
  </ul>
</template>

實際應用心得

先前在火箭隊的畢業專題中，使用Nuxt3開發，便有嘗試過Container元件的設計方式，雖然需要更多的時間去規劃，但結構確實較為清晰單純。

後來發現，若該頁面的內容不會太複雜，直接在Nuxt的pages / Vue的views頁面檔案中，使用composables取得API資料後，渲染UI畫面，會更為簡便快速，例如文章頁面內只會有文章相關的API資料，就可以直接在頁面發送API請求，再用props傳入UI元件。

如果較為複雜，例如首頁有許多不同種類的內容，再利用Container元件來分區塊，根據需求狀況不同，來選擇最適合的開發模式。

參考資料

Vue Patterns

# Vue

目錄