筆記長也

初探 VueJS - 元件與 Option 生命週期函數

元件的概念 元件的概念其實在其他前端框架,如 ReactJS 都有類似的概念,當我們遇到需要重複處理的東西時,可以只設計一次後續就能重複使用,當需要修改的時候也只需要修改一個東西就好,也更易於管理。至於切分的方式都完全視專案不同而定,這邊先不去討論「什麼情況下應該要切分出元件」這個議題,但大多數會不斷被重複利用的東西(例如 for 迴圈輸出代辦事項 item)就有寫成元件的效益。 元件的建立......

初步認識 Reflow 回流和 Repaint 重繪

簡介 現今比較容易影響前端效能大多是 JavaScript ,操作大量 DOM 確實會給瀏覽器較大的負擔。而變更 CSS 也有造成效能的兩大元凶:重排(回流)(Reflow)和 重繪(Repaint),今天就來介紹一下這兩個名詞吧。 瀏覽器如何渲染畫面? 在開始介紹兩個名詞之前,要先了解瀏覽......

從前端框架看「關注點分離」

其實本來這一週是要介紹 Vue 的元件概念與生命週期,於是我想提及關注點分離概念後再來介紹。但礙於兩者加起來篇幅太長所以本週就只先介紹何謂關注點分離。 關注點分離 「關注點分離」的意思是指「每一個模組各自有獨立的關注點」,即意味著每個模組只需要專注在一個焦點上,不需要被不同的概念分心、亦或者是不需要到分散的檔案中進行修改。以下介紹幾個不同的分離方式: 以技術為單位分離 - Angul......

前端效能優化 - Debounce 和 Throttle

簡介 寫過一些前端互動網頁之後,多少會使用到一些事件被觸發之後的一些動作,例如:滑鼠移動、滾動等事件,但這些事件會在短時間內頻繁被觸發,如果在這一些事件上綁定了很多 DOM 事件很有可能會引起大量的效能消耗。 而解決這種過度頻繁觸發的問題常見的有兩種解法:Debounce 和 Throttle。 Debounce-去抖動 Debounce 處理連續觸發事件的時候,在某段時間內只有最後一次會被執行,而且......

初探 VueJS - Option API 和Composition API 比較

本篇文章我們將來了解關於 Vue 篩寫元件的兩種方法: Option 以及 Composition 兩種API。針對個別詳細的用法與概念,將會在另外的文章呈現。 Option API 和 Composition API  Option API 是原先 Vue 2 提供的方方法,而 Vue 3 開始新增了 Composition API 的寫法。 明顯的差異 比較可見的差異就是在於程式碼的管理方式, Option API 較有明確規範,必須遵循 API 的方法定義元件......

初探 VueJS - VueJS 專案結構介紹

以Vite建立的Vue專案結構 透過Vite建立專案之後,目錄會因為選擇不同的套件而有些許不同,在本次我們選擇了以下套件: Vue Router : VueJS 官方的前端路由套件,建議安裝 Pinia : 狀態管理器,可安裝 Vitest : 單元測試框架 Cypress : E2E測試框架 ESLint : 程式碼格式檢查(通常會裝) Prettier : 格式化程式碼 (原則上都選了)......

初探 VueJS - 建立第一個Vue專案

初探 VueJS 系列前言 許久未更新網站了,最近也已經畢業並進入職場工作了,由於在學校的緣故,應該會有機會開始更新一些主題。 本次將更新的是 Vue 的基本系列,由於前一陣子找工作的時候,很多企業都是使用 Vue 作為前端函式庫(或框架),反而 ReactJS 以及 Angular 都相對較少,所以給自己一個新的目標。 VueCLI 與  Vite Vue 作為一個受歡迎的前端框架,自然也有類似於 React 以......

FacebookHydra 基本介紹 - 輕鬆地管理 Config

Hydra hydra 是 facebook 的開源框架,用於簡化 python 應用程式的設定文件管理,可以透過命令列介面來設定修改不同的設定值以及使用不同的設定文件組合檔案,因應需要頻繁更動設定值的情況,例如 AI 模型參數的調整。 安裝 使用 pip 來安裝到專案裡面 pip install hydra-core --upgrade 指定 Config 文件 hydraDemo.py......

ReactJS 技巧 - Redux 資料儲存與事件處理

Redux 要做什麼 在基礎入門的文章當中,提及了幾種跨元件傳遞 state 的方式(ReactJS入門 - 各階層Component 溝通),但隨著專案增胖及元件的增加,這些方式都會使得 state 難以維護(每一個元件都必須維護自己的 state,更別說跨元件互動了)。 Redux 可以讓網站所有的 state 統一管理,也能跨元件取用,還能讓資料以及畫......

ReactJS入門 - Firebase 留言板設計實戰

本篇將會是 React 入門的最後一篇文章,將會利用之前所學習過的技巧來設計一個簡單的留言板。 開始之前 本篇文章會透過提供程式碼範例來解說,建議各位可以先自行依照列出的需求做練習再看看是不是遇到什麼問題,再來參考解答。 程式碼部分,均會以 Functional Component 來設計,並且使用 ReactHook。也可以試著練習改成 Class Component 的設計。 技術規格 前端:React,後端:f......