寫原生 JS 的時候，下面兩段應該都不陌生： // 表單送出，不要讓頁面重新整理 form.addEventListener('submit', (e) => { e.preventDefa...
寫 Vue 的人幾乎都聽過這句話：「v-for 要加 key，而且不要用 index。」 但如果再追問一句「為什麼？」，很多人（包括以前的我）只能回答「因為會出 bug」「因為效能比較差」。會出什麼...
現代框架（React、Vue、Angular）在呼叫外部 API（如 Google Gemini）時，雖然底層都是發送 HTTP 請求，但由於各框架的響應式系統、渲染時機、狀態管理思想不同，導致寫法、...
前言 前幾天聊了 ref、reactive、computed、watch，都是在處理「資料怎麼變」。今天換個角度，看資料變了以後，畫面上的東西要怎麼出現、怎麼消失。 Vue 提供兩個看起來很像的指令：...
前幾天我們用 Proxy 做出迷你 reactive，也認識了 ref、reactive、watch。資料已經會「變」了，但使用者看不到資料，只看得到畫面。今天要講的就是資料和畫面之間的那座橋：模板語...
前言 在 Day03 我們用 Proxy 做了一個迷你 reactive，只要資料一改，畫面就馬上跟著更新。 但當時我有留一個伏筆：真正的 Vue 並不是這樣做的。 今天就來把這個伏筆收回來，順便認識...
昨天已經成功把隨機產生的 Array 畫成長條圖，今天終於要開始挑戰這個專案最重要的部分：讓 Bubble Sort 動起來。 目前我把畫面分成三個區塊：左側顯示原始資料與目前步驟，中間顯示排序的長條...
雖然我們的畫面還沒有很完整，但程式碼在後面只會越來越多，所以趁今天我們要來進行元件拆分，整理一下整個專案的結構。 一、什麼是元件？為什麼要拆？ 你可以把 App.vue 想像成一個「主控台」，原本所有...
昨天我們把網站拆成前端、後端、資料庫。今天要進第二幕，從前端開始。講到前端，你可能聽過一大串名字： JavaScript、TypeScript、React、Vue、Next.js、Angular、T...
前言 資料變了，我們常常需要「順便做點什麼」：打 API、存進 localStorage、印個 log。Vue 3 給了我們 computed、watch、watchEffect 三個看起來都跟「資料...