Vue.js 新手學習筆記：WordPress 網站開發實戰

身為 Vue.js 新手，在使用 Vue.js 開發 WordPress 網站的過程中，累積了不少實用筆記。本文涵蓋 computed、v-for、Axios、Async/Await，以及整合 WordPress、WooCommerce 與 ACF 的常見技巧，適合剛入門的前端開發者參考。

前言：為什麼要學 Vue.js + WordPress？

這陣子在公司負責部落格網站開發，雖然對 JavaScript 與 Vue.js 還算新手，但隨著實際開發累積了不少心得。本篇文章是我的學習備忘錄，記錄在 Vue.js 搭配 WordPress 開發過程中遇到的常見問題與解法，希望也能幫助到同樣正在學習的你。

---

Vue computed 屬性使用技巧

Vue 的 computed 屬性可以放入 methods 中的 function 進行計算。由於 computed 比 methods 先執行，建議在 created() 生命週期鉤子中處理好 data，否則可能出現錯誤。若 data 需要等待 API 回傳，建議改用 watch 監聽，而不是直接用 computed。

• computed return 的結果可以是值（value）或陣列（array）
• 計算並比對 GET 的 data 是否符合：部分符號可用 match()，搭配陣列則使用 filter() 與 includes()

💡 小提醒：Stack Overflow 上雖有人提到 computed 可以 return forEach()，但在我目前的環境中尚未成功，還需要進一步研究。

---

v-for 搭配陣列操作

v-for 是 Vue.js 中用來迭代陣列與物件的核心指令，搭配陣列操作方法可以大幅提升資料渲染效率。

• v-for 搭配陣列操作，參考此篇

---

Axios 使用方法與 Fetch API 比較

Axios 是 Vue.js 開發中最常用的 HTTP 請求套件，比原生的 Fetch API 提供更友善的介面與錯誤處理機制。以下是幾個實用的參考資源：

• axios 全攻略，參考此篇
• axios.js 與原本 fetch API，均可 request API，參考此篇
• axios 基本使用 & Config 參考此篇

---

Async / Await 非同步資料處理

在 Vue.js 中處理 API 資料時，Async/Await 是控制非同步流程最簡潔的方式，能讓程式碼更易讀、更好維護。

• 非同步/同步資料取得，參考此篇
• Async：用於設定非同步區塊
• Await：必須在 Async 區塊內使用，設定在需要優先完成的項目前

---

Vue.js 整合 WordPress 開發技巧

將 Vue.js 與 WordPress REST API 整合時，常見需求之一是判斷使用者的登入狀態，以顯示不同的內容或功能。

• 判斷用戶是否登入：可透過 WordPress REST API 的 /wp/v2/users/me 端點搭配驗證 token 來確認登入狀態

---

Vue.js 整合 WooCommerce API 實戰

WooCommerce 提供兩個版本的 REST API，在開發時需要注意差異，才能正確取得商品資料：

• 舊版 API（仍可用，商品內可看到屬性代稱）：https://example.com/wc-api/v3/products Api-Docs
• 新版 API（需再往下一層 GET 才能取得屬性代稱）：https://example.com/wp-json/wc/v3/products Api-Docs
• API 均可用 Postman 測試，輸入認證設定後 Code snippet 可快速設定
• Woocommerce GitHub 參考
• 判斷當前頁面是否為商品頁 is_product() 參考
• 範例數據下載
• 修改每頁顯示的商品數量

---

ACF 自訂欄位與 REST API 整合

Advanced Custom Fields（ACF）是 WordPress 最常用的自訂欄位外掛，透過 REST API 或 PHP 函式可以靈活取得後台資料：

• ACF to REST API：將 ACF 欄位暴露至 REST API 的外掛
• PHP 取得後台自訂欄位值 get_field()，範例

---

forEach 陣列操作與資料處理

在 Vue.js 開發中，forEach 常用於處理 API 回傳的陣列資料，搭配 push 與 join 可以靈活整合至 Axios 請求中：

• forEach 後的 Array 可使用 join()，將陣列內的資料合併成一個字串回傳至 axios 的 Params

  

• forEach push 的 Object 或 Array 格式需先設定，參考此篇 和下圖

  

---

其他常見問題與注意事項

在使用 Vue.js 搭配 WordPress 開發的過程中，還有一些容易踩坑的地方需要特別注意：

• 若 API GET 後的資料輸出跑亂碼，可參考此篇，將亂碼字串改以 v-html 輸出
• 以前常用 jQuery，後來發現在 new Vue 宣告的範圍內，jQuery 會失去作用而不相容，建議改用 Vue 原生方式操作 DOM