Vue 開發最佳實踐

在使用 Vue.js 開發時，遵循最佳實踐可以提高代碼的可讀性、可維護性和可擴展性。以下是一些 Vue 開發中的最佳實踐，涵蓋代碼結構、性能優化、組件設計等方面。

1. 組件設計

1.1. 組件應遵循單一職責原則

每個組件應該專注於單一的功能或任務。這樣做可以提高可讀性和維護性。當組件變得過於複雜時，考慮將其拆分為多個更小的子組件。

<!-- 壞的做法：組件太過複雜，處理多個邏輯 -->
<template>
  <div>
    <!-- 頭部 -->
    <header>...</header>
    
    <!-- 內容邏輯 -->
    <main>...</main>

    <!-- 底部 -->
    <footer>...</footer>
  </div>
</template>

<!-- 好的做法：將邏輯拆分到單獨的子組件 -->
<template>
  <div>
    <HeaderComponent />
    <MainContent />
    <FooterComponent />
  </div>
</template>

1.2. 組件命名規則

使用一致的組件命名規則。組件名應該是 PascalCase 格式，並且每個組件文件應該對應一個 Vue 文件。

// 文件名：MyComponent.vue
export default {
  name: 'MyComponent',
};

1.3. 組件通信應簡單明瞭

組件之間的通信應當盡可能簡單，使用 props 向下傳遞數據，使用 emit 向上傳遞事件。避免子組件直接修改父組件的狀態，這會破壞 Vue 的單向數據流。

<!-- 父組件 -->
<ChildComponent :message="messageFromParent" @customEvent="handleEvent" />

2. 狀態管理

2.1. 局部狀態優先

只有當狀態在多個組件之間共享時，才需要提升到 Vuex 進行全局管理。對於只影響單個組件的狀態，應保持在組件內部，這樣可以減少全局狀態的複雜性。

// 壞的做法：不必要的 Vuex 全局狀態
state: {
  modalVisible: false
}

// 好的做法：局部管理組件狀態
setup() {
  const modalVisible = ref(false);
  return { modalVisible };
}

2.2. 使用 Vuex Module

當應用變得複雜時，應將 Vuex 狀態拆分成模組，以便更好的管理和維護。每個模組應該專注於特定的功能領域。

// Vuex 模組化
const userModule = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};

const store = createStore({
  modules: {
    user: userModule
  }
});

3. 性能優化

3.1. 按需加載組件

對於大型應用，按需加載組件可以顯著提高應用的性能，減少首次載入時間。可以使用 路由懶加載 或 動態加載組件 來實現。

// 路由懶加載
const UserProfile = () => import('./components/UserProfile.vue');

3.2. 避免不必要的重繪

使用 Vue 的 v-if 和 v-show 控制元素顯示和隱藏，但要注意兩者的差異：v-if 會完全刪除和重新創建 DOM 元素，而 v-show 只是通過 CSS 切換元素的可見性。根據具體需求選擇合適的指令。

<!-- `v-show` 適合頻繁顯示/隱藏的元素 -->
<div v-show="isVisible">...</div>

<!-- `v-if` 適合條件較少變動的元素 -->
<div v-if="isVisible">...</div>

3.3. 使用 key 來提升列表渲染性能

在 v-for 中應始終使用 key 屬性來唯一標識每個項目，這樣 Vue 能夠更有效地跟蹤元素，減少不必要的 DOM 操作。

<li v-for="item in items" :key="item.id"></li>

4. 組件重用與可組合性

4.1. 使用 Slots 提高組件靈活性

Vue 的插槽 (slot) 功能使組件更加靈活和可重用。透過 slots，你可以將特定內容傳遞給子組件，並可以在組件內部進行自定義顯示。

<template>
  <div class="modal">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 使用組件時可以自定義內容 -->
<ModalComponent>
  <template #header>
    <h3>自定義標題</h3>
  </template>
  <p>自定義內容</p>
  <template #footer>
    <button>關閉</button>
  </template>
</ModalComponent>

4.2. 使用 Composable 和 Composition API

Vue 3 的 Composition API 可以讓代碼更加可重用和可組合，特別是當你需要在不同組件中共享邏輯時，可以將這些邏輯抽取到 Composable 中。

// useTodos.js - 可組合邏輯
import { ref } from 'vue';

export function useTodos() {
  const todos = ref([]);
  const addTodo = (todo) => {
    todos.value.push(todo);
  };
  return { todos, addTodo };
}

在組件中使用這個可組合的邏輯：

import { useTodos } from './useTodos';

export default {
  setup() {
    const { todos, addTodo } = useTodos();
    return { todos, addTodo };
  }
};

5. 代碼風格與一致性

5.1. 遵循 Vue 官方風格指南

Vue 提供了一份 官方風格指南，它涵蓋了命名規則、組件結構、模板設計等方面的最佳實踐。遵循這些規範有助於提高團隊合作時代碼的一致性。

5.2. 使用 ESLint 和 Prettier

在項目中引入 ESLint 和 Prettier 工具，這可以幫助你保持代碼風格的一致性，並自動修復一些簡單的錯誤。

npm install eslint eslint-plugin-vue --save-dev
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

6. 測試

6.1. 撰寫單元測試

Vue 3 官方支持使用 Vue Test Utils 進行單元測試，這是測試 Vue 組件的標準工具。撰寫單元測試能確保組件的功能穩定，減少 Bug 的出現。

import { mount } from '@vue/test-utils';
import TodoItem from '@/components/TodoItem.vue';

test('顯示待辦事項', () => {
  const wrapper = mount(TodoItem, {
    props: { todo: { text: '測試待辦事項', completed: false } }
  });
  expect(wrapper.text()).toContain('測試待辦事項');
});

6.2. 進行 E2E 測試

使用工具如 Cypress 或 TestCafe 來進行端到端測試，模擬用戶操作並測試應用的整體運行情況。

---

7. 部署與生產環境配置

7.1. 啟用生產模式

在生產環境中，確保啟用了 Vue 的生產模式。生產模式下會關閉一些開發時期的警告信息，從而提高應用的性能。

// main.js
if (process.env.NODE_ENV === 'production') {
  Vue.config.productionTip = false;
}

7.2. 開啟資源壓縮與代碼分割

通過 Webpack 或 Vite 配置來壓縮靜態資源和進行代碼分割，這樣可以減少用戶首次加載的資源大小，提升應用的加載速度。

---

總結

這些最佳實踐能幫助你在使用 Vue 開發應用時，構建出更加健壯、性能更高且可維護性更好的代碼。透過合理的組件設計、狀態管理、性能優化和測試，你可以確保應用在開發和生產環境中都表現優異。